Vue的踩坑记录1

在做一个后台管理系统的时候，做了一个过滤器，使用filter做的，代码如下：

data() {
	return {
		tableData:'',
		// 过滤器参数
		filterData: '',
	};
},
computed: {
	// 过滤器 模糊返回id和商品名!
	filteredDorm: function() {
		const that = this;
		return that.tableData.filter(function(list) {
			// 模糊匹配id和商品名
			return ((list.id.toString().indexOf(that.filterData) !== -1) ||
					(list.name.indexOf(that.filterData) !== -1))
		})
	}
},

这样看起来应该是没有什么问题的，我的输入框已经双向绑定好了filterData，首先说明，是可以进行筛选的，功能正常，问题来了，当我需要在某tableData里写入参数传到后台的跟新数据的时候开始出大问题,下面是写入数据的方法

addProduct(){
    const that = this;
     that.loading=true;
     var form = {
         name:that.name,
     };
     that.tableData.push(that.form);
     that.axios({
         method: 'post',
         data: {
             name: that.form.name,
         },
         url:that.GLOBAL.BASE_URL.admin+'/product',
         withCredentials: true
     })
     .then(that.addProductSucc)
     .catch(response => {
         console.log(response)
         if (response.status == 401) {
             that.$router.push('/login')
         }
     })
 },
 addProductSucc(res){
     const that = this;
     res = res.data;
     if(res.code == 0){
         this.$message.success('添加数据成功');
         this.getProduct(that.pageVal);
         this.loading=false;
         this.dialogAddVisible = false;
     }else{
         alert('网络异常，请稍候重试')
     }
 },

这里可以看报错信息
就很莫名其妙的说我的toString（）找不到，，我也不知道为什么，如果去了toString（），就会变成IndexOf（）找不到，知道项目结束我也不知道为什么，上网也找不到答案，所以希望看到的大佬可以给我稍微解答一下

所以只能通过其他的方法了，但是还是没想出比filter更好的方法，所以就改了思路

computed: {
   // 过滤器，进行搜索时使用
    filteredDorm: function() {
        const input = this.input;
        if(input){
            return this.tableData.filter(data => {
                return Object.keys(data).some(key => {
                    return String(data[key]).toLowerCase().indexOf(input) > -1
                })
            })
        }
        return this.tableData
    }
},

虽然依旧是使用了filter，但是先用some()来检测数组中的元素是否满足指定条件，因为some()会依次执行数组的每个元素如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测，如果没有满足条件的元素，则返回false，功能有点像filter，然后在利用indexOf对数组进行匹配，但是indexOf方法对大小写敏感所以用toLowerCase方法全部变成小写再匹配，然后就不会再报错了

当然这种方法是我借鉴了百度的一位大佬的，但是我那时候忘记看他的名字和链接了，如果看到十分抱歉

根据两个的区别，我大概做了一个分析，当然不知道对不对，如果有大佬认为我的想法错了，希望可以指正一下

就是过滤器已经和el-table的：data绑定了，el-input的内容与filterData绑定，然后当添加数据的时候，因为filterData没有任何数据，所以进到函数里的“list.id.toString().indexOf(that.filterData) !== -1”时候，会发现filterData是空值，但是filter是不会检测空数组的，所以就会导致错误，这只是我的猜测，我也没有依据，希望以后学习到更多的知识的时候能够解决这个问题