如何在 Vue.js 中访问嵌套数组中的数据？答案

【问题标题】：How to access data in a nested array in Vue.js?如何在 Vue.js 中访问嵌套数组中的数据？
【发布时间】：2019-08-09 07:16:37
【问题描述】：

这个问题的答案似乎很明显，但很难找到解决方案。

我的数据结构：

我尝试访问属性对象的第一张图片的 url。

 <tr v-for="property in properties">
        <th scope="row">${property.id}</th>
        <td><a :href="'#'">${property.title} - ${property.images[0].image}</a>
        </td>

很遗憾，property.images[0].image 不起作用。

我是 Vue.js 的新手。也许我没有看到明显的东西。任何帮助，将不胜感激。

非常感谢。

【问题讨论】：

您的代码看起来尽可能正确。您是否更改了分隔符，因为此页面也在服务器端呈现？我唯一的猜测是，您提供的数据在页面呈现后到达前端，并且您尝试不是从 vue 实例中实现它，因此它没有被 vue 的 setter 和 getter 包装，因此反应性中断。
感谢您的评论。我刚刚找到了一个解决方案 - 见下文。我更改了分隔符，因为它是一个 Django 项目，而且 Django 模板也使用花括号。

标签： vue.js vuejs2

【解决方案1】：

我不太清楚你想要达到什么目的，但这里有一个工作示例：

new Vue({
  el: "#app",
  data: {
    properties: [{
        id: 0,
        title: 'foo',
        images: [{
            image: 'foo image 1'
          },
          {
            image: 'foo image 2'
          }
        ]
      },
      {
        id: 1,
        title: 'bar',
        images: [{
            image: 'bar 1'
          },
          {
            image: 'bar 1'
          }
        ]
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <table>
    <tbody>
      <tr v-for="(property, index) in properties" :key="index">
        <td scope="row">{{property.id}}</td>
        <td><a :href="'#'">{{property.title}} - {{property.images[0].image}}</a>
      </tr>
    </tbody>
  </table>
</div>

在使用v-for时也要使用:key属性。

【讨论】：

感谢您的关注，但您可以更改 Vue.js 中的分隔符，我将主题更改为使用 ${} 而不是花括号 => fr.vuejs.org/v2/api/index.html#delimiters - 所以您并没有真正回答我问题。顺便说一句：key 不是强制性的。所以你无缘无故否决了我的问题。
首先，不知道delimiters 选项，所以感谢您分享一些新的输入。其次，我没有否决你的问题——但相反，我花了一些时间用一个可行的例子来回答它。正如我所说，您的问题尚不清楚，但我为您提供了一个有效的 sn-p。第三 - 添加:key 属性是一个好习惯。
当我说谢谢时，我是认真的，因为你花时间。没有冒犯:)

【解决方案2】：

我终于找到答案了！这很愚蠢:)

某些属性对象没有图像。

所以当我把 property.images[0].image 它不存在。如果您尝试访问的属性不存在，vue.js 似乎不会呈现整个内容（我不确定，只是猜测）。

下面是使它工作的代码：

<tr v-for="property in properties">
    <th scope="row">${property.id}</th>
    <td v-if="property.images[0]"><a :href="'#'">${property.title} - ${property.images[0].image}</a>
    </td>

首先我使用以下代码检查属性是否存在：

v-if="property.images[0]"

【讨论】：