Показать данные в Vue.js с v-for

Question

Я делаю простую систему корзины покупок, используя Laravel и Vue.js. Я могу успешно добавлять элементы в свою корзину покупок и получать их до определенной точки, но у меня возникают проблемы с выводом элементов в представление.

Когда я ударил корзину маршрут, я загружаю вид корзины, которая вызывает следующий Vue код:

new Vue({ 
    el: '#basket', 
    ready: function() { 
    this.fetchBasket(); 
    }, 
    methods: { 
    fetchBasket: function(){ 
     this.$http.get('api/buy/fetchBasket', function (basketItems) { 
     this.$set('basketItems', basketItems); 
     }); 
    } 
    } 
}); 

Это работает и я получаю данные, возвращаемые в консоли:

{027c91341fd5cf4d2579b49c4b6a90da: 
{id: 1, name: "A Gnarly Tree", price: 15, quantity: 2}} 
    027c91341fd5cf4d2579b49c4b6a90da: 
    {id: 1, name: "A Gnarly Tree", price: 15, quantity: 2} 
    id:1 
    name:"A Gnarly Tree" 
    price:15 
    quantity:2 

Однако, в самом представлении ничего не появляется. Я пытаюсь использовать v-for для заполнения таблицы:

<tbody> 
    <tr v-for="item in basketItems"> 
     <td>@{{ item.name }}</td> 
     <td>@{{ item.price }}</td> 
     <td>@{{ item.quantity }}</td> 
     <td>@<button class="btn btn-primary">Update</button></td> 
    </tr> 
</tbody> 

Что я делаю неправильно?

Answer 1

Вы не инициализировали элементы корзины в данных вашего экземпляра vue. Попробуйте добавить:

... 
el: '#basket', 
data: { basketItems: [] }, // <-- this line 
ready: function(){ 
    this.fetchBasket(); 
}, 
... 

редактировать Также

this.$set('basketItems', basketItems);

в

Vue.set(this, 'basketItems', basketItems)