Vue.js中如何在插值表达式内使用prop动态访问对象属性

你写的${dataPoint}是JavaScript模板字符串的专属语法，无法在Vue插值表达式的点链式属性调用中被解析，因此无法正常运行。
Vue模板中动态访问对象属性，直接使用JavaScript原生的方括号取值语法即可，和普通JS的动态属性访问逻辑完全一致，在v-for循环中按如下写法修改即可：

{{ data[index].attributes[dataPoint] }}

相关说明 #

• 必须保证传入的dataPoint prop值与attributes对象下的实际键名完全匹配，例如示例中传入dataPoint="data_to_look_at"时，attributes对象必须存在名为data_to_look_at的属性，否则会返回undefined
• 如果涉及多层级动态属性访问，不要混用点号语法，每一层动态键都用方括号包裹即可
• 为避免对象某一层级不存在导致渲染报错，可以搭配可选链操作符做安全取值：

  {{ data[index]?.attributes?.[dataPoint] }}
  

• 不要在插值中使用完整模板字符串拼接属性路径，这类写法会直接将字符串作为纯文本渲染，不会执行属性取值逻辑

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