本文探讨了在Vue.js应用中，如何在搜索框输入内容时过滤二维数组，并在退格时恢复初始状态的问题。作者遇到的问题是，尽管尝试避免直接修改原数组，但退格操作仍无法正确返回数据的初始状态。文章分析了可能的原因，并提出了对只进行一次过滤操作的思考，寻求解决方案。
1.我的需求:在搜索框输入内容时能过滤出包含内容的数据,删除内容时能返回数据初始状态
{A商品,B商品,C商品},{B商品}
搜索:'A' 返回:A商品;
退格:'' 返回 {A商品,B商品,C商品},{B商品}
2.数组结构:
arrs: [
{
goods: [{
title: 'A标题A标题AA标题AA标题AA标题AA标题AA标题AA标题',
},
{
title: 'B标题B标题BB标题BB标题BB标题BB标题BB标题BB标题',
},
{
title: '这是标题这是标题这是标题这是标题这是标题这是标题',
}],
orderNo: '111111111111',
showtr:true
},
{
goods: [{
title: 'A标题A标题AA标题AA标题AA标题AA标题AA标题AA标题',
},
{
title: 'B标题B标题BB标题BB标题BB标题BB标题BB标题BB标题',
}],
orderNo: '222222222222',
showtr:true
}]
3.我的代码:
html:<input type="text" v-model="searchGood">
<tr v-for="arr in msg" v-show='arr.showtr'>
<div v-for="keys in arr.goods">
<div class="title">{{keys.title}}</div>
</div>
</tr>
vue.js:computed: {
msgs() {
arr = this.goodFilter(this.arrs)
return arr
}
methods:{
goodFilter (arr) {
if (this.searchGood == '')
return arr
var arrs = [];
for (var i = 0;i<arr.length;i++){
arrs[i] = arr[i]
}
arrs = arrs.filter(function (item, index) {
var rr = false, self = this;
item.goods = item.goods.filter(function (it) {
if (it.title.indexOf(self.searchGood) !== -1) {
rr = true;
return rr;
}
})
return rr
}, this)
return arrs
}}
},
3.我的问题:
在退格后不会返回数据初始状态.
是因为进行了两次filter的原因吗?但我没有修改原数组,而是修改遍历复制的数组啊?
若只对数组进行一次filter,退格是会返回初始状态
如:return arrs.filter(function(item){return item==1})
希望能得到解决方案.谢谢!
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
