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

Posted 2023-02-23

【中文标题】Vue.js 在 v-for 循环中访问嵌套对象

【英文标题】：Vue.js access nested object in v-for loop

【发布时间】：2019-04-24 10:37:36

【问题描述】：

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

【参考方案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>

【讨论】：

感谢您快速而正确的回答！它确实只解决了我的部分错误，但帮助我调试并解决了其余部分。 （仅供参考：整个应用程序的主要错误是我以错误的方式推送对象数组。再次摆脱花括号解决了这个问题！）