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

这个问题的答案似乎显而易见，但要找到解决办法还需要努力

我的数据结构：

我尝试访问属性对象的第一个图像的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.id}

很遗憾，

属性。图像[0]。图像

不起作用

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

---

非常感谢。

我不太清楚您想要实现什么目标，但这里有一个工作示例：

newvue({
el:“应用程序”，
数据：{
特性：[{
id:0，
标题:"富",，
图像：[{
图像：“foo图像1”
},
{
图片：“富图片2”
}
]
},
{
id:1，
标题：“酒吧”，
图像：[{
图片：“酒吧1”
},
{
图片：“酒吧1”
}
]
}
]
}
})

{{property.id}

我终于找到了答案！真傻：）

某些属性对象没有图像

所以当我放置property.images[0]时，它不存在。如果您尝试访问的属性不存在（我不确定，只是猜测），那么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>

${property.id}

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

---

v-if=“property.images[0]”

感谢您的关注，但是您可以更改Vue.js中的分隔符，我将主题更改为使用${}而不是大括号=>-因此您没有真正回答我的问题。顺便说一句：密钥不是强制性的。所以你无缘无故地否决了我的问题。首先，我不知道

分隔符

选项，所以感谢分享一些新的输入。第二，我没有否决你的问题，但恰恰相反，我花了一些时间用一个有效的例子来回答。正如我所说，你的问题不清楚，但我提供了一个工作片段。第三，添加

：key

属性是一种很好的做法。当我说谢谢时，我是认真的，因为你花了时间。无意冒犯：）您的代码似乎尽可能正确。您是否更改了分隔符，因为此页也在服务器端呈现？。我唯一的猜测是，您提供的数据在页面呈现后到达前端，而您试图实现它，而不是从vue实例，因此它没有使用vue的setter和getter包装，因此反应性会中断。感谢您的评论。我刚刚找到了一个解决方案——见下文。我更改了分隔符，因为它是Django项目，Django模板也使用大括号。