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>

Majed Badawi Majed Badawi · Accepted Answer · 2021-01-27T20:27:17

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>

Vue.Js: List rendering

1 Answers