[Vuejs]-Vue.js Component doesn't show data from method of component

by

2👍

✅

As documented here,

components must contain exactly one root node.

Putting a v-for on the top-level element makes it repeated. If you wrap that element in a div, it works.

It looks like you may get around that limitation if you want to write your own render function.

Vue.component('my-list', {
  template: '<div><task v-for="task in tasks">{{ task.task }}</task></div>',
  data() {
    return {
      tasks: [{
          task: 'Go to the store',
          completed: false
        },
        {
          task: 'Go to the shop',
          completed: true
        },
        {
          task: 'Go to the mall',
          completed: true
        }
      ]
    };
  }
});

Vue.component('task', {
  template: '<li><slot></slot></li>'
});

new Vue({
  el: '#root'
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.min.js"></script>
<div id="root">
  <h1>Tasks</h1>
  <my-list></my-list>
</div>
👤Roy J

Leave a comment