Vue中用v-for遍历vuex getter返回数组对象时如何访问name属性

代码问题修正 #

你当前的写法存在两处需要调整的点：

• 遍历数组的v-for参数错误：你写的(budget, key, index)是遍历单个JS对象的参数格式，仅适用于遍历单个对象的键值对场景。你的getter返回的是对象数组，遍历数组的标准参数格式为(当前项, 索引)，不需要额外的key参数。
• key绑定不规范：使用数组索引index作为key会在列表排序、增删项时出现渲染异常，建议使用每个预算对象的唯一id属性作为key值。

最终可运行代码 #

<v-list-item
  v-for="(budget, index) in $store.getters.getBudgets"
  :key="budget.id"
>
  <!-- 直接通过插值语法渲染预算名称 -->
  {{ budget.name }}
</v-list-item>

属性访问说明 #

遍历得到的budget变量就是数组中的单个预算对象，和你拿到的{id:29, name: 'Budget1'...}结构完全一致，直接通过点运算符就能访问对象的任意属性：

• 访问预算名称：budget.name
• 访问预算ID：budget.id
  其他自定义字段都可以按照相同规则访问。

内容的提问来源于stack exchange，提问作者Wonakee Amos