在 Vue.js 中按数字过滤

Posted 2023-02-16

【中文标题】在 Vue.js 中按数字过滤

【英文标题】：Filter by number in Vue.js

【发布时间】：2020-07-11 01:21:15

【问题描述】：

我从 vue 开始。 我有一个按商店名称过滤的输入，商店的名称是通过一个 json 收集的，它也有 id_store，但 id_store 是一个数字。 我如何也可以按 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/[e-mail]" ></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/[e-mail]" alt />
        </div>
      </router-link>
    </div>
  </div>

【问题讨论】：

item.id_store.toString().match(this.search)?

如果运行良好，如何让两个过滤器同时工作？

【参考方案1】：

您可以更新filter() 方法，如：

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