How to v-for in a vue component?

Question

Vue.js

Works:

Vue.component('vue-mark-list', {
  template: '<div>{{marks}}</div>',
  data: function () {
    return {
      marks: {
        1: 1,
        2: 2,
        3: 3
      }
    }
  }
});

Does not work:

Vue.component('vue-mark-list', {
  template: '<div v-for="mark in marks">{{mark}}</div>',
  data: function () {
    return {
      marks: {
        1: 1,
        2: 2,
        3: 3
      }
    }
  }
});

where is the mistake? :)

Answer 1

There is no root element in the second template, wrap it in another div:

<div><div v-for="mark in marks">{{mark}}</div></div>