[Vuejs]-Vue.Js: List rendering

by

0👍

✅

You need to create only three objects in items, each having name and age. Then, in the v-for, you can deconstruct each item in the array and print the attributes in two space-sperated span elements:

new Vue({
  el: "#app",
  data() {
    return {
      items:  [
        { name: 'Daniel', age: '25' },
        { name: 'John', age: '25' },
        { name: 'Jen', age: '31' }
      ]
    };
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  
<div id="app">
  <ul>
    <li v-for="({name,age}, index) in items" :key="index">
      <span>{{ name }}</span>{{ ' ' }}<span>{{ age }}</span>
    </li>
  </ul>
</div>

Leave a comment