Почему не работает v-for в vue?

Question

[Nurshat]

Html

<div id="app">
    <records></records>
</div>

JS

Vue.component('records', {
    template: ' <div>{{orders}}</div> <div><div v-for="order in orders"> {{order.id}}</div></div>',

    data: function() {
        return{
            orders: [{id: 1}, {id: 2}, {id: 3}]
        }
    },

    created: function () {
        this.getOrders();
    },

    methods: {
        getOrders: function () {
            var vm = this;
            axiosInst.get('/records')
                .then(function (response) {
                    //vm.$set('ordersList', response.data);

                    vm.orders = response.data.slice();
                    console.log(vm.orders);
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
    }
})

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

Столкнулся с такой проблемой, не срабатывает v-for, хотя без цикла объекты без проблем выводятся.
Помогите пожалуйста разобраться.

Answer 1

[Evgeny Kulakov]

Возможно из-за того, что у вас шаблон компонента records имеет больше одного корневого элемента.

Comments

[Nurshat]

Спасибо большое)

Answer 2

[fomenko_alexandr]

Да, всё правильно ответили
Шаблон должен иметь только один родительский элемент
В вашем случае нужно обернуть всё в один див:

template: '<div><div>{{orders}}</div> <div><div v-for="order in orders"> {{order.id}}</div></div></div>',

Comments

[Nurshat]

Часа 3 сидел не мог понять в чем дело, спасибо большое)