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

Question

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

无法读取性能toLowerCase()的null

如何将search道具设置回空字符串而不是单击图标null时clearable？

我的组件.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

尝试检查searchdata 属性作为 return 语句中的条件：

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