在 Vue.js 中使用 v-for 访问对象数组中的项目答案

【问题标题】：access item in an array in object using v-for in Vue.js在 Vue.js 中使用 v-for 访问对象数组中的项目
【发布时间】：2021-11-18 00:17:13
【问题描述】：

我正在尝试使用 v-for 列出每个预算的名称。我使用 vuex getter 访问与用户关联的预算，但它返回数组中的每个对象。如何访问数组中每个预算的名称？

我在这里尝试列出预算名称：

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

这是 vuex.js 中的 getter 函数

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

这是我得到的结果：这是一个这样的对象列表， {id:29，名称：Budget1...} {id:35, name:Budget2...}

【问题讨论】：

标签： arrays list vue.js vuex

【解决方案1】：

您可以遍历数组对象并在循环中显示budget.name。假设您的预算 ID 是唯一的，而不是 null，那么您不需要将索引用作 key，如果这是目的的话。

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

【讨论】：

谢谢，我刚刚想通了！