Vue.js access nested object in v-for loop

Question

I'd like to access the "newest" object of a nested object array inside another object array in Vue.js. Please see the example below.

Example Object elements:

[
  {
    'name': 'foo',
    'content': [
      {
        title: 'bar'
      }
    ]
  },
  {
    'name': 'hello world',
    'content': [
      {
        'title': 'this is a test'
      },
      {
        'title': 'this another test'
      }
    ]
  }
]

Simplified vue code:

<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>

Why is that not working? Vue says that element.content is undefined.

Boussadjra Brahim · Accepted Answer · 2018-11-21 19:32:01Z

1

Remove {} from v-for="{ element, index } in elements" and replace them by ()

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>

answered Nov 21, 2018 at 19:32

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alexschomb Over a year ago

thanks for your fast and correct answer! it did solve only parts of my error, but helped me debug and solve the rest. (FYI: the overall app the main error was that I pushed the object array the wrong way. again getting rid of the curly braces solved the issue!)

Collectives™ on Stack Overflow

Vue.js access nested object in v-for loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related