Question

我有一个基于Vue（1.x）的购物篮系统，与使用Moltin-Cart的Laravel后端配合使用。使用对后端的API调用来填充，检索和更新购物篮。

我可以毫无问题地将商品添加到购物篮中：

addToBasket: function(){
                var that = this;
                var item = this.book;
                this.$http.post('/api/buy/addToBasket', item);
                this.basketAddSuccess = true;
                setTimeout(function(){ that.basketAddSuccess = false; }, 4000);
            }

击中了后端：

public function addToBasket(Request $request)
    {
        // grab book information
        $book = Book::find($request->id);

        // extract price from the database to ensure it's correct
        $row = $book->price;

        // create an item
        $item = array(
                'id' => $book->id,
                'name' => $book->title,
                'price' => $row,
                'quantity' => $request->qty
            );

        // Make the insertion...
        $this->cart->insert($item);
    }

当我点击我的fetchBasket API函数时，我得到了预期的结果：

{
  027c91341fd5cf4d2579b49c4b6a90da: {
   id: 1,
   name: "Book Title",
   price: 40,
   quantity: "1"
  }
}

长随机字符串是购物车ID。

当我尝试使用简单的v-for列出篮子内容时出现问题：

<tr v-for="item in basketItems">

但是这会引发很多错误：

[Vue warn]: Duplicate value found in v-for="item in basketItems": "0". Use track-by="$index" if you are expecting duplicate values.

事实上，JSON字符串中每个字符都有一个错误。

所以谷歌搜索我发现track-by并尝试首先使用item.id实现它：

<tr v-for="item in basketItems" track-by="item.id">

抛出

VM4389:3 Uncaught TypeError: Cannot read property 'id' of undefined

然后使用$ index：

<tr v-for="item in basketItems" track-by="$index">

这不会引发错误，但它会在篮子视图中为JSON字符串中的每个字符创建一个空的篮子项目。

关于如何修复它的任何想法？

编辑：

public function fetchBasket()
    {
        return ($this->cart->contents(true));
    }

Answer 1

track-by中的v-for已经认为您正在引用迭代变量的属性（在您的情况下为item），因此不需要track-by="item.id"，只需执行：

<tr v-for="item in basketItems" track-by="id">

如果您在此之后没有看到任何内容，我建议您尝试只打印name：

<table>
  <tr v-for="item in basketItems" track-by="id">
    <td>{{ item.name }}</td>
  </tr>
<table>

因为，请记住，浏览器不会呈现 <tr>不属于<table>。

如何修复v-for中找到的重复值？

1 个答案: