时间戳

首页 > 解决方案 > 如果在数组中找到单词，则 Vue.js 按下拉列表过滤（仅不完全匹配）

javascript - 如果在数组中找到单词，则 Vue.js 按下拉列表过滤（仅不完全匹配）

问题描述

https://jsfiddle.net/75f3c2po/

即使有逗号分隔其他单词，如何通过下拉匹配使上述 Vue.js 代码过滤器与整个数组匹配？现在它只匹配，type: BMW但我希望它也显示可能有类似的卡片type: BMW, Ford。

另外，我是 Vue 的超级新手，希望有人也可以告诉我如何在select选择选项后立即更新它，而无需点击“搜索”按钮？

非常感谢

标签： javascriptvue.jsfilter

解决方案

为了能够按类型查找，您可以用逗号分隔类型字符串，并检查数组是否包含该值：

      this.searchResult = this.items.filter(function(item) {
        let filtered = true
        if (filterType) {
          filtered = item.type.split(',').includes(filterType)
        }
        if (filtered) {
          if (filterCountry && filterCountry.length > 0) {
            filtered = item.country == filterCountry
          }
        }
        if (filtered) {
          if (filterYear && filterYear.length > 0) {
            filtered = item.year == filterYear
          }
        }
        return filtered
      })

为了能够立即搜索，您可以@change在您的选择中使用处理程序：

<select v-model="selectedType" @change="search">

推荐阅读