Categories

Oct 21, 2019 in Vue.JS

Q: Why should not use if and for directives together on the same element?

1 Answer

Oct 21, 2019

It is recommended not to use v-if on the same element as v-for. Because v-for directive has a higher priority than v-if. There are two cases where developers try to use this combination,

if you try to filter the list using v-if tag,

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

This can be avoided by preparing the filtered list using computed property on the initial list

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
...... //
...... //
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id">
    {{ user.name }}
  <li>
</ul>
  1. To avoid rendering a list if it should be hidden For example, if you try to conditionally check if the user is to be shown or hidden
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

This can be solved by moving the condition to a parent by avoiding this check for each user

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>
Click here to read more about Vue JS
Click here to read more about Insurance

Related questions

Madanswer
Oct 21, 2019 in Vue.JS
Oct 21, 2019 in Vue.JS
Oct 21, 2019 in Vue.JS
...