Vue.Js: List rendering

Question

I am doing this little code challenge:

We provided some simple Vue.js template code. Your goal is first to set items equal to an array of three objects with the following properties:

name = Daniel, age = 25 - name = John, age = 24 - name = Jen, age = 31.

Then in the template , you should display an unordered list ( UL ) with list items ( LI ) within it. The content of each list item should contain two spans ( SPAN ), one with the name and the other with the age . The span elements should be separated by a single space.

With my code below nothing happens when I try to run the program. (Not sure if it's because it's in a browser).

Here's my code:

<template>
  <div id="app">
    <ul>
      <li v-for="item in items">
        {{name}} {{age}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        items: 
        [
          { name: 'Daniel' },
          { age: '25' },
          { name: 'John' },
          { age: '25' },
          { name: 'Jen' },
          { age: '31' }
        ]
      };
    }
  };
</script>

Edit for comment section

<template>
  <div id="app">
    <ul>
      <li v-for="({name,age}) in items">
        <span>{{name}}</span> <span>{{age}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        items: 
        [
          {name: 'Daniel', age: '25'},
          {name: 'John', age: '25'},
          {name: 'Jen', age: '31'}

        ]
      };
    }
  };
</script>

Answer 1

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>