Vue.js 3如何遍历复杂对象并提取指定属性值？

你的问题出在访问嵌套属性的语法上：你写的value[text]会把text当作一个变量名去查找，但当前作用域里并没有定义名为text的变量，所以返回空值。

解决方法很简单，有两种正确的写法：

1. 使用点语法直接访问属性（推荐，更直观）：

<li v-for="(value, propertyName) in article.specs">
  {{ propertyName }}: {{ value.text }}
</li>

2. 使用方括号语法，给属性名加引号：

<li v-for="(value, propertyName) in article.specs">
  {{ propertyName }}: {{ value['text'] }}
</li>

修改后就能得到你想要的输出：

type: description type
prop1: description prop1
prop2: description prop1

另外，你的遍历里用到了index，但对于对象的v-for来说，第三个参数是键的索引（也就是遍历顺序的序号），如果不需要显示的话可以去掉，让代码更简洁。

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