Filter array of keywords in vue

clipboard.png

queryDatav-model

sourceData

clipboard.png

clipboard.png

is based on the input keyword Filter array

watch: {

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

}

the data source should not be changed, but the rendering should change. There is still no change on the page.

May.25,2021

queryData(){
    ...
    return this.sourceData.filter...
    ...
}

Please complete Code
this is obviously wrong, you listen for changes in queryData , and then change queryData ? And if it's not what you want to change, it's not reflected in the question at all.


use computed instead of watch.

computed:{

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

use filterdData in the template to get Filter data. Use sourceData to display all data.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3c7c3-2c324.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3c7c3-2c324.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?