VueJS - Фильтровать элементы в списке на основе значения поиска

Question

На моей странице есть список элементов, созданных из локальной переменной, хранящейся в моем компоненте. Я добавил входной текст, используемый для поиска, чтобы иметь возможность фильтровать и отображать только элементы, для которых в имени содержится строка, которую ищет пользователь.

Я никогда не вижу обновления в моем списке со следующим кодом. Где моя ошибка?

ОБРАЗЕЦ

<input v-model="searchTextValue" v-on:keyup="onSearch" type="text" />

<div v-for="car in localCars" :key="car.id">
    <span>{{ car.name }}</span>
</div>

JS

export default {
    data() {
        return {
            localCars: [{name: "audi"}, {name:"fiat"}],
            searchTextValue : ""
        };
    },
    methods: {
        onSearch() {
            this.localCars.filter(function (car) {
                return car.name.indexOf(this.searchTextValue) !== -1;
            });
        },
    }
}

Answer 1

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

Демо Здесь

<template>
  <div>
    <input v-model="searchTerm" type="text">
    <div></div>
    <div v-for="car in filterByTerm" :key="car.id">
      <span>{{ car.name }}</span>
    </div>
  </div>
</template>


<script>
export default {
  name: "filter-demo",
  data() {
    return {
      localCars: [{ name: "audi" }, { name: "fiat" }],
      searchTerm: ""
    };
  },
  computed: {
    filterByTerm() {
      return this.localCars.filter(car => {
        return car.name.toLowerCase().includes(this.searchTerm);
      });
    }
  },
  methods: {}
};
</script>