在 vuetify 文本字段上将数据设置为空字符串可清除？答案

【问题标题】：Set data to empty string on vuetify text field clearable?在 vuetify 文本字段上将数据设置为空字符串可清除？
【发布时间】：2020-01-11 15:45:07
【问题描述】：

我有一个v-data-table 绑定到一个search 道具，还有一个v-text-field 和clearable 集。当我使用clearable 图标按钮清除文本字段时，v-text-field 将search 属性设置为null，导致我的计算属性错误：

无法读取toLowerCase() 的属性null

当单击clearable 图标时，如何将search 属性设置回空字符串而不是null？

MyComponent.vue:

<template>
  <div>
    <v-text-field solo hide-details single-line v-model="search" clearable>
    </v-text-field>

    <v-data-table :search="search" class="mt-2" :items="myArray" hide-actions hide-headers elevation-1>
      <template v-slot:items="props">
        <td>{{props.item.myItems}}</td>
      </template>    
    </v-data-table>
  </div>
</template>

<script>
export default {
  props: ['parameter'],
  data() {
    return {
      search: ''
    }
  },
  computed: {
    myArray() {
      let myArray = []
      if(this.parameter) {
        myArray = this.parameter.filter((download) => {                
          return download.barcode.includes(this.search.toLowerCase());
        })
      }
      return myArray;
    }
  }
}
</script>

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

尝试检查 search 数据属性作为返回语句中的条件：

  if(this.parameter) {
      myArray = this.parameter.filter((download) => {                
            return !this.search || download.barcode.includes(this.search.toLowerCase());
        })
    }

【讨论】：

不幸的是，没有工作。显示没有可用数据。
试试!this.search || download.barcode.includes(this.search.toLowerCase());
仍然无法正常工作，因为它不返回值。
它仍在将值设置回null。
无论搜索输入如何，此建议都会使过滤器错误地返回所有项目。过滤器的重点是收集其条形码匹配搜索输入的项目。允许 !this.search 或 this.search === null 可以防止 OP 出错，但也会破坏预期的功能。

【解决方案2】：

尝试使用@click:clear="clearFunction()" 提到的here。

Codepen 参考： https://codepen.io/anon/pen/ePmLOg?editors=1010

【讨论】：

【解决方案3】：

无需将search 的null 转换为空字符串。只需更新计算的道具以检查真实的搜索值：

let myArray = []

if (this.parameter && this.search ?) {
  myArray = this.parameter.filter((download) => {
    return download.barcode.includes(this.search.toLowerCase())
  })
}

return myArray

【讨论】：