如何使用 vuetify v-data-table 过滤精确的 mach？

问题描述

我正在尝试制作一个自定义过滤器以获得完全匹配

如果我的搜索是歌剧但不是歌剧，我希望过滤器返回歌剧：

• 歌剧
• 操作
• 希望

如何使用自定义过滤器的示例： https://vuetifyjs.com/en/components/data-tables/#custom-filter

目前我所拥有的：

<v-data-table
        :headers="headers"
        :items="words"
        item-key="name"
        :search="search"
        :custom-filter="filterPerfectMatch"
      >
...
</v-data-table>

...

methods: {
    filterPerfectMatch(value,search) {
      return value != null &&
        search != null &&
        typeof value === 'string' &&
      //  value.match(search) === true &&  <== doesn't work T T
        value.toString().indexOf(search) !== -1
    },},

解决方法

发现这很容易：

 filterPerfectMatch(value,search) {
      if (value == search) {
        console.log("value :" + value + ",search :" + search)
        return value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().indexOf(search) !== -1
      }

      
    },

,

如果您想要完全匹配，请使用 == 或 === 进行字符串比较。无需使用 indexOf。

methods: {
    filterPerfectMatch(value,search) {
      return value != null && value === search
    },},

您也可以将 toLowercase() 添加到 value 和 search，但您需要添加检查它们是否为字符串返回。