0👍
You can reference to codes below:
<template>
<div><input v-model="searchKeywords"/></div>
<table >
<tr v-for="(item, index) in (searchKeywords.length>0?searchResultArr:sellbill)">
<td>
<input type="text" v-if="item.edit === true" v-model="item.customers">
<p v-else>{{item.customers}}</p>
</td>
<td>
<input type="text" v-if="item.edit === true" v-model="item.productName">
<p v-else>{{item.productName}}</p>
</td>
<td>
<input type="number" v-if="item.edit === true" v-model="item.price">
<p v-else>{{item.price}}</p>
</td>
<td>
<button @click="remove(index)">delete</button>
<button v-if="item.edit === false" @click="item.edit = true">edit</button>
<button v-else @click="item.edit = false">submit</button>
</td>
</tr>
</table>
</template>
<script>
export default {
data:{
sellbill:[],
searchKeywords:'',
},
computed:{
searchResultArr(){
if(this.searchKeywords.length>0){
return this.sellbill.filter(e=>(e.customers.includes(this.searchKeywords) || e.productName.includes(this.searchKeywords)))
}else{
return []
}
}
}
}
</script>
Source:stackexchange.com