I am currently working on a Vue project where I am attempting to filter my table based on the tags that users click. I have created a method that outputs all the rows containing the tag clicked by the user.
<el-table-column prop="Keyword" label="Keyword" width="200">
<template #default="scope">
<el-tag v-for="(k, index) in (scope.row.Keyword.split(','))" :key="index" @click="handlekey(k)">{{k}} </el-tag>
</template>
</el-table-column>
handlekey(val){
return this.data.filter((item)=>{return item.Keyword.split(',').includes(val)})
}
When a user clicks on a tag, the console output is shown in this image.
I am currently trying to filter the table so that only the rows containing the clicked tag are displayed. I attempted to write this function in
computed but received an error stating that $options.handlekey is not a function.
Additionally, I tried to update the original data by adding
this.data = this.data.filter((item)=>{return item.Keyword.split(',').includes(val)})handlekey method, but that approach did not work either.
I would appreciate any suggestions on how I can successfully achieve this functionality.