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

Question

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

Cannot read property toLowerCase() of 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>

Answer 1

尝试检查 search 数据属性作为 return 语句中的条件:

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