javascript - 使用 v-for 在 Vue.js 中显示数据

Question

我正在使用 Laravel 和 Vue.js 制作一个简单的购物车系统。我可以成功地将商品添加到购物篮并将其检索到某个点，但我在实际将商品输出到 View 时遇到了困难。

当我点击购物篮路线时，我加载购物篮 View ，该 View 触发以下 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

但是， View 本身中什么也没有出现。我正在尝试使用 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实例数据中的basketItems。尝试添加:

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

同时编辑

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

到

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