Don't use v-if and v-for on the same element

This can lead to unexpected results because v-if is evaluated after v-for.

If you need both, consider moving v-if to a wrapping <template> element around the v-for.

Sourcehttps://vuejs.org/guide/essentials/list.html#v-for-with-v-if

List of all tips

  • Category Icon
    Vue

    Don't use v-if and v-for on the same element

    This can lead to unexpected results because v-if is evaluated after v-for.

  • Category Icon
    Vue

    Use defineModel to simplify v-model in components

    Since Vue 3.4 you can use defineModel to simplify v-model bindings.

  • Category Icon
    Vue

    Use useTemplateRef for DOM references

    Introduced in Vue 3.5, useTemplateRef provides a more explicit way to handle template refs without naming conflicts.

  • Category Icon
    Vue

    Use Writable Computed Properties

    Computed properties are read-only by default, but you can create 'writable' ones by providing a getter and a setter.