我想访问Vue.js中另一个对象数组内嵌套对象数组的“最新”对象。请参见下面的示例。
示例对象elements
:
[
{
'name': 'foo',
'content': [
{
title: 'bar'
}
]
},
{
'name': 'hello world',
'content': [
{
'title': 'this is a test'
},
{
'title': 'this another test'
}
]
}
]
简化的vue代码:
<div v-for="{ element, index } in elements" :key="index">
<h1>{{ element.name }}</h1>
<p>Latest content: {{ element.content[element.content.length - 1].title }}</p>
</div>
那为什么不起作用? Vue说element.content is undefined
。
答案 0 :(得分:1)
从{}
中删除v-for="{ element, index } in elements"
,并用()
代替
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
elements: [{
'name': 'foo',
'content': [{
title: 'bar'
}]
},
{
'name': 'hello world',
'content': [{
'title': 'this is a test'
},
{
'title': 'this another test'
}
]
}
]
}
}
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<div v-for="( element, index ) in elements" :key="index">
<h1>{{ element.name }}</h1>
<p>Latest content: {{ element.content[element.content.length - 1].title }}</p>
</div>
</div>