In my page, I have a list of elements built from a local variable stored in my ponent. I added an input text used for search to be able to filter and display only elements for which the name contains the string which is searched by the user.

I never see any refresh on my list with the following code. Where is my mistake ?

TEMPLATE

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

In my page, I have a list of elements built from a local variable stored in my ponent. I added an input text used for search to be able to filter and display only elements for which the name contains the string which is searched by the user.

I never see any refresh on my list with the following code. Where is my mistake ?

TEMPLATE

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

• javascript
• vue.js
• filter
• vuejs2

• Do you by refresh mean that the page is not reacting? Because it's not going to refresh. That's the point of vue I think. – Jabberwocky Commented Jun 6, 2019 at 13:43
• 5 check this jsfiddle example jsfiddle/dkmmhf5y/1 – Thamer Commented Jun 6, 2019 at 13:49
• 1 @Thamerbelfkih You should post it as a answer – Stephen S Commented Jun 6, 2019 at 13:51

1 Answer 1

Your code should look like this: -

Demo 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: ""
    };
  },
  puted: {
    filterByTerm() {
      return this.localCars.filter(car => {
        return car.name.toLowerCase().includes(this.searchTerm);
      });
    }
  },
  methods: {}
};
</script>