Блог

#1 Не может выполнять поиск по идентификатору, даже если он выбран. Условие » имя » в цикле работает хорошо, но я не могу правильно подписать поиск по if (ничего не искать).

#2 Когда я выбираю опцию выбрать, она отображается до тех пор, пока я не начну печатать. Я хочу, чтобы он отображался, даже если я печатаю.

   name: 'CharactersList',
  data: function () {
    return {
      selected: '',
      searchQuery: '',
      list: [],
      page: 1
    }
  },
  computed: {
    filteredList () {
      if (this.selected === 'Charactername' amp;amp; this.searchQuery) {
        return this.list.filter((item) => {
          return item.name.toLowerCase().includes(this.searchQuery)
        })
      } else if (this.selected === 'Id' amp;amp; 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>
 

Шаг 1: Создан с помощью фиктивной модели

 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
};
},
 

Шаг 2: Вычисленный метод изменен, как показано ниже

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

Шаг 3: HTML-шаблон будет выглядеть следующим образом

 <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>
 

ДЕМОНСТРАЦИЯ