Javascript Vue.js Uncaught TypeError:此.list.$remove不是函数

我一直收到与此.list相同的错误。$remove不是函数。我相信这与html标记有关，但不确定。谁能给我指出正确的方向吗？我已经挣扎了两天了

 Vue.component('cart-co', {

  template: '#cart-template',

  data: function() {
    return {
      list: []
    }
  },

  ready: function() {
    $.getJSON('cart/content', function(data) {
      this.list = data;
    }.bind(this));
  },

  methods: {
    removeItem: function(item) {
      console.log(item);
      this.list.$remove(item);
    }
  }
});


new Vue({
  el: 'body',
});

这是我的购物车部分：

<cart-co></cart-co>

<template id="cart-template">
  <div class="cart-content-wrapper">
    <div class="cart-content" >
      <ul v-if="list" class="scroller" style="height: 250px;">

        <li v-for="item in list">
          <a href="item.html"><img src="assets/temp/cart-img.jpg" alt="" width="37" height="34"></a>
          <span class="cart-content-count">@{{ item.quantity }}</span>
          <strong><a href="item.html">@{{ item.name }}</a></strong>
          <em>@{{ item.price | currency }}</em>
          <a href="#" class="del-goods" v-on:click="removeItem(item)"><i class="fa fa-times"></i></a>
        </li>

      </ul>
      <ul v-else class="scroller" style="height: 250px;">
        <li>Shopping cart is empty</li>
      </ul>
      <div class="text-right">
        <a href="{{ route('cart.show-cart') }}" class="btn btn-default">View Cart</a>
        <a href="checkout.html" class="btn btn-primary">Checkout</a>
      </div>
    </div>
  </div>
</template>

@{{item.quantity}}

@{{item.price | currency}}



购物车是空的

如果从

$.getJSON（）

调用返回的数据是一个对象（购物车中的每个项目都是键值对），则可以按如下方式修改代码以处理删除项目

假设数据如下所示：

{
   "item1": { "name": "Name 1", "quantity": 1, "price": 10 },
   "item2": { "name": "Name 2", "quantity": 1, "price": 10 },
   "item3": { "name": "Name 3", "quantity": 1, "price": 10 }
};

removeItem: function(key) {
  Vue.delete(this.list, key);
}

在删除链接中传递要删除的项目的密钥：

<a href="#" class="del-goods" v-on:click="removeItem($key)"><i class="fa fa-times"></i></a>

---

这将使用该方法删除属性（并确保视图对更改作出反应）。

$remove在vue js 2.0中不可用。。。现在你可以使用

拼接（索引，1）

---

“1表示它从数组中拼接了一个元素”

我相信这个问题在代码中的其他地方。我使用了您的代码，并对其进行了非常轻微的调整，以查看是否出现相同的错误，但效果良好：我查找了Vue Devtools，发现我获得的数据是对象中的对象，而不是数组中的对象。因此，我将对象替换为虚拟数据作为数组，它仍然会给我相同的错误。所以不是这样。我想知道Vue是否与其他javascript库有冲突？嗯。我相信问题毕竟在于对象。当列表是数组时，.$remove起作用。当列表是一个对象时，.remove给出错误，这不是一个函数。我已经查阅了文档，但是没有对对象的这个方法的引用。存在对对象v-for的引用。如果您能为我指出正确的方向，我们将不胜感激。我想看到您的

$.getJSON（）

呼叫返回的数据样本会很有帮助。谢谢Peter，就这样。它现在正在从购物车中删除该项目。对于在Vue2中出现此问题的任何其他人，您必须了解数组更改检测和变异方法：并调用

removietem（key）

，它使用

this.list.splice（key，1）。