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)

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

1 个答案: