#1 Even if chosen, cannot search by id. The 'name' condition in the loop works well but I am unable to correctly search by id (returns nothing).
#2 When selecting an option from the dropdown menu, it only displays until I start typing. I would like it to remain displayed even while typing.
name: 'CharactersList',
data: function () {
return {
selected: '',
searchQuery: '',
list: [],
page: 1
}
},
computed: {
filteredList () {
if (this.selected === 'Charactername' && this.searchQuery) {
return this.list.filter((item) => {
return item.name.toLowerCase().includes(this.searchQuery)
})
} else if (this.selected === 'Id' && this.searchQuery) {
return this.list.filter((item) => {
return item.id.includes(this.searchQuery)
})
} else {
return this.list
}
}
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<select v-model="selected">
<option disabled value="" required>Search by</option>
<option class="charactername">Name</option>
<option class="episode">Episode</option>
<option class="id">Id</option>
</select>
<input v-model="searchQuery" type="text" placeholder="Type here...">
<table><span class="allcharacters">All</span>
<tr class="wrapper-top-bar">
<td>Photo</td>
<td>ID</td>
<td>Name</td>
<td>Gender</td>
<td>Species</td>
<td>Last episode</td>
<td>Add to fav</td>
</tr>
<tr class="wrapper-list-table" v-for="item in filteredList" v-bind:key="item.id">
<td><img v-bind:src="item.image"/></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
<td>{{item.species}}</td>
<td>{{}}</td>
<td><button>⭐</button></td>
</tr>
</table>