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

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 实例的数据中初始化 basketItems。尝试添加：

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

同时编辑

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

到

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