VueJS-根据搜索值过滤列表中的元素

时间:2019-06-06 13:41:15

标签: javascript vue.js filter vuejs2

在我的页面中,有一个列表,这些元素是根据存储在组件中的局部变量构建的。我添加了用于搜索的输入文本,以便能够过滤和显示仅名称中包含用户搜索的字符串的元素。

使用以下代码,我的列表上再也看不到任何刷新。我的错误在哪里?

模板

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

1 个答案:

答案 0 :(得分:2)

您的代码应如下所示:-

演示Here

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