Vue.js 在 v-for 循环中访问嵌套对象

Question

我想访问 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 。

Answer 1

将{} from 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>