Vue.js无法通过字符串类型JSON键属性访问JSON数据求助

数据定义 #

[...] 
 data() {
    return {
      theme: "dark",
      data: {
        ioa: [
          
          {
            title: "xyz1",
            applications: ["app1","app2","app3"],
          },

          {
            title: "xyz2",
            applications: ["app1","app2"],
          },

        ],

        applications: {
          app1:{
            name: "app1",
          },
          mastodon:{
            app2: "app2",
          },
          app3:{
            name: "app3",
          },
        }
      }
    }
  },
[...]

当前模板代码 #

<!--
首先我通过Vue文本模板语法循环data对象中的ioa数组并打印内容
-->
<div v-for="item in data.ioa">
    {{ item.title }}

<!--
接着我循环每个item中的applications数组
-->
    <div v-for="id in item.applications">

<!--
变量"id"中存储的是具体名称，该名称同时也是data中application对象的JSON键。
但当我尝试打印名称时，页面无任何内容
-->
        {{ data.applications.id.name }} 
    </div>
</div>

问题原因 #

你使用的data.applications.id.name是点语法，这种写法会把id当作对象的字面量键名，而非循环得到的动态字符串变量，所以浏览器找不到名为id的属性，才会报错data.applications.id is undefined。

解决方法 #

在Vue模板中访问动态键对应的对象属性，必须使用方括号语法，把变量放在方括号里：

<div v-for="item in data.ioa">
    {{ item.title }}
    <div v-for="id in item.applications">
        <!-- 用方括号语法访问动态键，?.是可选链操作符防止报错 -->
        {{ data.applications[id]?.name }} 
    </div>
</div>

额外注意事项 #

你的applications对象里，mastodon键的结构和其他键不一致：

mastodon:{
  app2: "app2",
},

这会导致当id为app2时，data.applications[id]找不到对应属性（因为键是mastodon而非app2），最终name会是undefined。建议把结构调整成和app1、app3一致：

app2:{
  name: "app2",
},

保证applications的键和ioa里applications数组的元素一一对应，这样匹配逻辑更直接。

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