Filter array of objects by select?

Question

Реализовал селект с фильром Как избавится от варианти когда я использую переменную val чтобы хранить значения evt.target.value Тоесть избавиться от этого нативного javascript-а и немного перемедать код

Answer 1

<template>
  <div>
    <select v-model="genderFilter">
      <option :value="null">All</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
      <option value="animal">Animal</option>
    </select>
    <table>
      <tr :key="member.index" v-for="member in filtredMembers">
        <td>{{ member.index }}</td>
        <td>{{ member.name }}</td>
        <td>{{ member.gender }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  import members from "@/members.json";

  export default {
    name: "App",

    data() {
      return {
        members,
        genderFilter: null,
      };
    },

    computed: {
      filtredMembers() {
        return this.members.filter(
          ({ gender }) =>
          // если genderFilter не null фильтруем по гендеру, иначе
          // отдаем все элементы
          this.genderFilter ? gender === this.genderFilter : true
        );
      },
    },
  };
</script>

БЛОГ НА HUSL

Filter array of objects by select?

Ответы (1 шт):