Как добавить фильтрацию по select к существующему поиску?

Question

[Vladislav Cherepanov]

Реализован поиск персонажей по имени, хочу добавить фильтрацию (по character.species) к этому поиску по select'у:

<select name="" id="">
        <option value="" disabled selected>Select yout option</option>
        <option value="">alive</option>
        <option value="">dead</option>
        <option value="">unknown</option>

github: https://github.com/xxlifestyle/rmpedia/blob/main/s...
Код:

<template>
<main>
    <div class="search-form">
      <input type="text" placeholder="Поиск..." v-model="search" />
      <select name="" id="">
        <option value="" disabled selected>Select yout option</option>
        <option value="">alive</option>
        <option value="">dead</option>
        <option value="">unknown</option>
      </select>
    </div>
    <div class="all-characters">
      <div
        class="character_card"
        v-for="character in searchCharacter"
        :key="character.id"
      >
        <div class="character_info">
          <img class="character_image" :src="character.image" alt="" />
          <div class="character_name">
            <a href="">{{ character.name }}</a>
          </div>
          <div class="character_add-info">
            <span>{{ character.gender }}</span>
            <span>{{ character.status }}</span>
            <span>{{ character.species }}</span>
          </div>
        </div>
      </div>
    </div>
    <button v-if="page !== 34" @click="loadMore" class="load-more_button">
      Ещё
    </button>
  </main>
</template>

<script>
import axios from "axios";

export default {
  name: "CharList",
  data() {
    return {
      search: "",
      characters: [],
      page: 1,
    };
  },
  beforeMount() {
    this.getTodos();
  },
  methods: {
    getTodos() {
      axios
        .get("https://rickandmortyapi.com/api/character/")
        .then((response) => (this.characters = response.data.results));
    },
    loadMore() {
      this.page++;
      axios

        .get("https://rickandmortyapi.com/api/character/?page=" + this.page)
        .then((response) => this.characters.push(...response.data.results));
      console.log(this.characters);
    },
  },
  computed: {
    searchCharacter() {
      return this.characters.filter((character) => {
        return character.name.toLowerCase().includes(this.search.toLowerCase());
      });
    },
  },
};
</script>

Comments

[Aetae]

нет идей

У нас тоже. Какую фильтрацию, фильтрацию чего...

[Vladislav Cherepanov]

Aetae, Извиняюсь, поправил

Answer 1

[0xD34F]

Добавляете в компонент свойство, которое будет содержать текущее значение выпадающего списка:

data: () => ({
  status: '',
  ...

Получаете массив возможных (не считая дефолтного) значений выпадающего списка:

computed: {
  statuses() {
    return [...new Set(this.characters.map(n => n.status))];
  },
  ...

Сам список пусть создаётся так, например:

<select v-model="status">
  <option value="">&lt; ALL &gt;</option>
  <option v-for="n in statuses">{{ n }}</option>
</select>

Ну и фильтруете, наконец:

computed: {
  filteredCharacters() {
    const search = this.search.toLowerCase();
    const status = this.status;

    return this.characters.filter(n => (
      (!search || n.name.toLowerCase().includes(search)) &&
      (!status || status === n.status)
    ));
  },
  ...

Comments

[Vladislav Cherepanov]

Благодарю!

Answer 2

[Aetae]

Ну и какие проблемы по образу и подобию сделать?
Все ответы у тебя уже есть в коде.
<select v-model="species">

data: {
  species: '',

searchCharacter() {
  return this.characters.filter((character) => {
    return character.name.toLowerCase().includes(this.search.toLowerCase())
    && character.species.toLowerCase().includes(this.species.toLowerCase());
  });
},

Впредь используй логику. Даже не зная javascript и vue, имея только голову на плечах можно было бы дойти до этого ответа.

Comments

[Vladislav Cherepanov]

Спасибо! Понял свою глупость)