Я делаю простую систему корзины покупок, используя 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>
Что я делаю не так?
