[Vuejs]-How can I use v-for with computed variable

by

3👍

To do conditions on a v-for, move them into a computed property:

computed: {
  authItems() {
    return this.items.children.filter((x) => {
      if (typeof x.auth === 'function') {
        return x.auth();
      }
      return x.auth === true;
    });
  },
},

then

 <template v-for="(subItem, index2) in authItems">
     <v-list-item sub-group  link :to="subItem.link" exact :key="index + '_sub_' + index2">
         <v-list-item-title v-text="subItem.title" ></v-list-item-title>
     </v-list-item>
</template>

It is the way you can treat conditions. In another way, you can do something like it, but it’s not so clear:

 <template v-for="(subItem, index2) in item.children.filter((x) => x.auth === true)">
     <v-list-item sub-group  link :to="subItem.link" exact :key="index + '_sub_' + index2">
         <v-list-item-title v-text="subItem.title" ></v-list-item-title>
     </v-list-item>
</template>
👤Raeisi

Leave a comment