CODEWITHSUNDEEP
jsonvue.jsvuejs2
JesúsDel
JesúsDel

Reputation: 103

Filter by number in Vue.js

I am starting in vue. I have an input that filters by the name of the store, the name of the store is collected through a json where it also has the id_store, but the id_store is a number. How can I also filter by store_id?

 computed: {
    filteredTiendas: function() {
      return Object.values(
        this.items
      ).filter(item => {
        return item.desc_store.match(this.search);
      });
    },
    searchUp: {
      get() {
        return this.search.toLowerCase();
      },
      set(search) {
        this.search = search.toUpperCase();
      }
    }
  }
};
[
{
"id_store": 2,
"desc_store": "ALBORAYA",
"type_store": "GSB"
},
{
"id_store": 4,
"desc_store": "LAS ROZAS",
"type_store": "GSB"
},
{
"id_store": 5,
"desc_store": "UTEBO",
"type_store": "GSB"
}
]
<div class="input-icon-wrap">
  <span class="input-icon"><img src="../../iconos/icon/[email protected]" alt=""></span>
  <input v-model="searchUp" placeholder="Busca tu tienda" class="input-with-icon" id="form-name">
</div>  
    </div>
    <div class="todastiendas">
    <div v-for="(item, i) in filteredTiendas" :key="i">
      <router-link :to="{name: 'secciones', params: { id: item.desc_store, id1: item.id_store  }}">
        <div class="tiendas">
            <span>{{item.id_store}}</span>
          <h1>{{ item.desc_store.toLowerCase()}}</h1>
          <img src="../../iconos/icon/chevron/[email protected]" alt />
        </div>
      </router-link>
    </div>
  </div>

Upvotes: 1

Views: 159

Answers (1)

palaѕн
palaѕн

Reputation: 73926

You can update filter() method like:

.filter(({desc_store, id_store}) => {
   return desc_store.match(this.search) || id_store.toString().match(this.search);
});

Upvotes: 2

Related Questions