Is there a way I can incorporate v-for with a computed variable?

Question

Is there a way I can incorporate v-for with a computed variable?

I am trying to display navigation items based on my authority and other conditions. Below is the code I am using:

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

I want to disable click when v-if="item.auth === true

Below is my object structure:

children: [
    {name:'menu1', title:'menu1', link:'/company/menu1', auth: () => {return this.currentNav===0 }}, // not working
    {name:'menu2', title:'menu2', link:'/company/menu2', auth: true}, // works
    {name:'menu3', title:'menu3', link:'/company/menu3', auth: this.MyInfo.Auth.menu3Auth === true }, // works, but menu visibility does not change when MyInfo.Auth.menu3Auth value changes.
    {name:'menu4', title:'menu4', link:'/company/menu4', auth: () => {return this.currentNav===4 || this.MyInfo.Auth.menu3Auth === true }}, 
    {name:'menu5', title:'menu5', link:'/company/menu5', auth: () => {return this.MyInfo.Auth.menu5Auth === false && this.MyInfo.Auth.menu3Auth === true  }
}

However, it is not functioning as expected. How can I resolve this issue?

javascript vue.js vuetify.js

Answer 1

Answer №1

If you need to apply conditions within a v-for loop, it's recommended to 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;
    });
  },
},

After defining the computed property, you can use it in your template like this:

 <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>

This approach ensures better readability and maintainability compared to directly filtering items within the v-for loop.

Answer 2

If you need to apply conditions within a v-for loop, it's recommended to 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;
    });
  },
},

After defining the computed property, you can use it in your template like this:

 <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>

This approach ensures better readability and maintainability compared to directly filtering items within the v-for loop.

Is there a way I can incorporate v-for with a computed variable?

Answer №1

Similar questions

Is the performance impacted by using try / catch instead of the `.catch` observable operator when handling XHR requests?

Node.js refuses to launch - the dreaded error 404, signaling that it has mysteriously vanished

Timeout for AngularJS Bootstrap UI Modal

How can I effectively monitor and track modifications to a document's properties in MongoDB?

The scrollbar will be visible only when the mouse hovers over the table

The vanishing act: Semantic UI menu disappears when you click

Tips for utilizing Vue router query parameters while in hash mode:

Prevent any screen interactions by disabling clicks, and then re-enable them either after a set amount of

A helpful guide on resetting ReactJs to its default state when data is not found

Overlap one element entirely with another

assigned to a variable and accessed in a different route

The React Native Expo is throwing an error stating that it is unable to locate the module 'minizlib'

What is the best way to populate MongoDB with information retrieved from an external API?

Searching for two distinct nested key values in Ramda

The dimensions of GridStack items specified in pixels for both height and width

Utilizing JQuery to modify the element's id and trigger a function upon clicking

What is the reason for triggering a rerender when there is a modification to a map() element using document.querySelector() in JS/next.js?

Utilizing const as the iteration variable in a for loop

Iterating through a series of Axios requests nested within each other to handle pagination in an

Using Ng-options in AngularJS to populate a select dropdown with an array of arrays