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

Question

我正在尝试使用 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, name:Budget1...} {id:35, name:Budget2...}

标签： arrayslistvue.jsvuex

Answer 1

您可以遍历数组对象并budget.name在循环内显示。假设您的预算 ID 是唯一的而不是唯一的null，则您不需要使用索引，就key好像这就是目的一样。

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