Vue.js uncatch TypeError:this.list.$remove 不是一个函数

Vue.js Uncaught TypeError: this.list.$remove is not a function

本文关键字：函数 一个 remove TypeError uncatch js this list Vue      更新时间：2023-09-26

我不断收到同样的错误，this.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>

$remove 在 Vue JS 2.0 中不可用...现在您可以使用

拼接(索引，1( " 1 表示它从数组中拼接一个元素">

如果从$.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 }
};

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

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

将removeItem()方法更改为如下所示：

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

这使用 Vue.delete 方法来删除属性(并确保视图对更改做出反应(。

相关文章：