Vue.js如何实现动态访问data中指定属性的对应值

解决方案 #

你需要使用 JavaScript 的方括号属性访问语法读取动态属性名对应的值，修改后代码如下：

data:{
  brand: undefined,
  model: undefined
},
methods:{
  check(){
    let fields = ['brand', 'model'];
    for(let i in fields){
      // 用方括号包裹动态属性名，即可正确读取对应值
      console.log(this[fields[i]])
    }
  }
}

原理说明 #

JavaScript 访问对象属性支持两种写法：

• 点语法：仅支持固定属性名，写法为 对象.属性名
• 方括号语法：支持传入变量/表达式作为属性名，写法为 对象[属性名变量]

你之前的写法用模板字符串拼接出的是"this.brand"这类普通字符串，JS 不会将其解析为对象属性访问逻辑，因此只能输出字符串本身，无法拿到实际值。

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