鍍金池/ 問答/HTML/ vue中關鍵字過濾數組

vue中關鍵字過濾數組

clipboard.png

queryData是v-model綁定的值

sourceData是數組

想讓這個數組根據關鍵字變化 返回過濾后的數據

但是不能改變數據源

求大神教下該怎么寫

clipboard.png

變成這樣？ 還是不好使啊

clipboard.png

就是根據輸入的關鍵字過濾數組

watch:{

queryData(val){
    if(val){
        return this.sourceData.filter((el,index,self)=>{
            return el.name.indexOf(val) >-1;
        })
    }
}

}

數據源是不應該變化的 但是渲染的應該變化 這樣寫頁面上還是沒變化

回答
編輯回答
菊外人

用 computed 而不是 watch.

computed:{

    filterdData(){
        if(this.queryData){
            return this.sourceData.filter((el,index,self)=>{
                return el.name.indexOf(this.queryData) >-1;
            })
        }
        
        return [];
    }
}

在模板中使用 filterdData 來獲取過濾后的數據. 用 sourceData 顯示全部數據.

2018年1月23日 23:24
編輯回答
別硬撐
queryData(){
    ...
    return this.sourceData.filter...
    ...
}

請貼 完整 代碼
這明顯是不對的，你監(jiān)聽queryData的改變，然后去改變queryData？而如果不是你要改變的是什么，這在問題里根本沒有體現。

2018年6月23日 21:18