access item in an array in object using v-for in Vue.js

Question

I am trying to list out the name for each budget using v-for. I use vuex getter to access the budgets associated with a user but it returns each object in the array. How do I access the name of each budget in the array?

Here I am attempting to list the budget names:

                    <v-list-item
                    v-for="(budget, key, index) in $store.getters.getBudgets"
                    :key="index"
                >

Here's the getter function in vuex.js

        getBudgets: state => {
       return state.user.budgets;
    }

Here are the results I am getting: Which is a list of objects like this, {id:29, name:Budget1...} {id:35, name:Budget2...}

Luciano · Accepted Answer · 2021-09-24 18:39:40Z

3

You can loop over array objects and show the budget.name within the loop. Assuming that your budget ids are unique and not null, you don't need to use the index as key if that's the purpose.

<v-list-item v-for="budget in $store.getters.getBudgets" :key="budget.id">
   {{ budget.name }}
</v-list-item>

answered Sep 24, 2021 at 18:39

Luciano

2,2042 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wonakee Amos Over a year ago

Thanks I literally just figured it out!

Collectives™ on Stack Overflow

access item in an array in object using v-for in Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related