Vue - 遍历具有嵌套对象的数组

Question

我正在获取一个列表，我正在尝试循环它，其中有一个对象。我正在使用 vue，数组如下所示：

companies: [
  name: "company1"
  id: 1
  type: "finance"
  additionalData: "{"funder":"blabla","idType":5,"number":"2"}"
]

我的问题是访问 additionalData 中的不同数据。

这是我的进展：

        <div
            v-for="(company, idx) in companies"
            :key="idx"
        >
          <p class="font-weight-bold text-h6"> {{ company.name }} </p>
          <p class="font-weight-bold"> {{ company.additionalData.funder }} </p>
        </div>

这不起作用，我也尝试了循环内的循环。当我只打印出 {{ company.additionalData }} 时，我得到了整个对象。它与对象在字符串中有关吗？我可以做一个计算或什么来解决这个问题吗？ :)

Answer 1

是的，你是对的，你不能在 html 中访问带有点符号的 json 属性。您可以使用 JSON.parse 解决这个问题，这会将您的 JSON 对象变成一个 JavaScript 对象，您可以在模板中访问该对象的属性。

companies: {
  name: "company1"
  id: 1
  type: "finance"
  additionalData: JSON.parse("{"funder":"blabla","idType":5,"number":"2"}")
}

Answer 2

看起来additionalData是一个包含JSON的字符串，所以尝试将字符串转换为对象。这样的事情应该有效：

<p class="font-weight-bold"> {{ JSON.parse(company.additionalData).funder }} </p>

Answer 3

语法问题

companies: [
  name: "company1"
  id: 1
  type: "finance"
  additionalData: {
    "funder": "blabla",
    "idType": 5,
    "number":"2"
  }
]

Vue - 遍历具有嵌套对象的数组

Vue - Loop through an array with nested objects

javascript

object

typescript

vue.js

v-for