CODEWITHSUNDEEP
arrayslistvue.jsvuex
Wonakee Amos
Wonakee Amos

Reputation: 21

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

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

Upvotes: 1

Views: 972

Answers (1)

Luciano
Luciano

Reputation: 2196

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>

Upvotes: 3

Related Questions