Vue.js 未捕获的类型错误:this.list.$remove 不是函数 [英] Vue.js Uncaught TypeError: this.list.$remove is not a function
问题描述
我不断收到同样的错误,即 this.list.$remove 不是函数.我相信它与 html 标记有关,但不确定.任何人都可以指出我正确的方向吗?过去 2 天我一直在挣扎.
Vue.component('cart-co', {模板: '#cart-template',数据:函数(){返回 {列表: []}},准备好:函数(){$.getJSON('购物车/内容', 函数(数据) {this.list = 数据;}.bind(this));},方法: {删除项目:功能(项目){控制台日志(项目);this.list.$remove(item);}}});新的 Vue({el: '身体',});
这是我的购物车部分:
<模板 id="购物车模板"><div class="cart-content-wrapper"><div class="cart-content" ><ul v-if="list" class="scroller" style="height: 250px;"><li v-for="列表中的项目"><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 |货币 }}<a href="#" class="del-goods" v-on:click="removeItem(item)"><i class="fa fa-times"></i></><ul v-else class="scroller" style="height: 250px;"><li>购物车是空的</li><div class="text-right"><a href="{{ route('cart.show-cart') }}" class="btn btn-default">查看购物车</a><a href="checkout.html" class="btn btn-primary">结帐</a>
</模板>
如果从 $.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 方法删除属性(并确保视图做出反应到变化).
I keep getting the same error that this.list.$remove is not a function. I believe it has something to do with the html markup but not sure. Can anyone point me in the right direction? I have been struggling for the last 2 days.
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',
});
Here is my cart section:
<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>
If the data coming back from your $.getJSON()
call is an object (with each item in the cart being a key value pair), you can modify your code as follows to handle removing items.
Assumming data looks something like this:
{
"item1": { "name": "Name 1", "quantity": 1, "price": 10 },
"item2": { "name": "Name 2", "quantity": 1, "price": 10 },
"item3": { "name": "Name 3", "quantity": 1, "price": 10 }
};
Pass the key of the item you want to remove in your delete link:
<a href="#" class="del-goods" v-on:click="removeItem($key)"><i class="fa fa-times"></i></a>
Change your removeItem()
method to something like this:
removeItem: function(key) {
Vue.delete(this.list, key);
}
This uses the Vue.delete method to delete the property (and ensures the view reacts to the change).
这篇关于Vue.js 未捕获的类型错误:this.list.$remove 不是函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!