Vue.js中如何使用动态值访问后端返回的指定数组属性

问题原因 #

你代码的问题是混淆了JavaScript对象两种属性访问方式的用法：

• 点语法（obj.key）：后面的key会被当作固定的属性名字面量处理，你写this.data.id时，代码实际尝试访问的是this.data里名为id的属性，而不是id变量存储的字符串对应的属性。
• 方括号语法（obj[变量/表达式]）：方括号内可以传入变量、字符串表达式，会把计算结果作为属性名访问对象属性，正好匹配你要动态用id变量值取属性的需求。

修复方案 #

把getContent函数里的取值逻辑改成方括号访问即可：

getContent(id) {
  this.accordion = this.data[id];
  console.log("data", id);
}

修改后代码会先取id变量的值topSellers，再访问this.data.topSellers，和你直接写固定属性名的效果完全一致。

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