Vue searching by the chosen option – can not search by id, even if chosen

#1 Can not search by id, even if chosen. The ‘name’ condition in the loop works well but I can not sign correctly searching by if (search nothing).

#2 When I choose the select option it displays until I start typing. I want to keep it displayed even if 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...">
    </div>
        <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>
    </table>

Answer

Step 1: Created with dummy model

data: function() {
return {
  selected: "",
  searchQuery: "",
  list: [
    {
      id: 1,
      name: "Jeba",
      gender: "Male",
      species: "Human",
      episode: "Game of Thrones"
    },
    {
      id: 2,
      name: "Weronika",
      gender: "Female",
      species: "Human",
      episode: "Friends"
    },
    {
      id: 3,
      name: "Panek",
      gender: "Male",
      species: "Human",
      episode: "Prison Break"
    }
  ],
  page: 1
};
},

Step 2: Computed method modified as like below

computed: {
filteredList() {
  if (this.searchQuery && this.selected) {
    return this.list.filter(item => {
      if (this.selected === "name" || this.selected === "episode") {
        return (
          item[this.selected] &&
          item[this.selected]
            .toLowerCase()
            .includes(this.searchQuery.toLowerCase())
        );
      } else {
        return (
          item[this.selected] &&
          item[this.selected].toString() === this.searchQuery.toString()
        );
      }
    });
  } else {
    return this.list;
  }
}
}

Step 3: HTML template will be like below

<div>
  <select v-model="selected">
    <option disabled value="" required>Search by</option>
    <option value="name">Name</option>
    <option value="episode">Episode</option>
    <option value="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>{{item.episode}}</td>
          <td><button>⭐</button></td>
        </tr>
    </table>
 </div>

DEMO

Leave a Reply

Your email address will not be published. Required fields are marked *