I have a v-data-table bound to a search prop, and a v-text-field with clearable set. When I clear the text field with the clearable icon-button, v-text-field sets the search prop to null, causing my puted prop to error out with:

Cannot read property toLowerCase() of null

How can I set the search prop back to an empty string instead of null when the clearable icon is clicked?

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: ''
    }
  },
  puted: {
    myArray() {
      let myArray = []
      if(this.parameter) {
        myArray = this.parameter.filter((download) => {                
          return download.barcode.includes(this.search.toLowerCase());
        })
      }
      return myArray;
    }
  }
}
</script>

I have a v-data-table bound to a search prop, and a v-text-field with clearable set. When I clear the text field with the clearable icon-button, v-text-field sets the search prop to null, causing my puted prop to error out with:

Cannot read property toLowerCase() of null

How can I set the search prop back to an empty string instead of null when the clearable icon is clicked?

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: ''
    }
  },
  puted: {
    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

3 Answers 3

Try to check the search data property as a condition inside the return statement :

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

Try using @click:clear="clearFunction()" as mentioned here.

Codepen reference: https://codepen.io/anon/pen/ePmLOg?editors=1010

No need to translate search's null to empty string. Just update the puted prop to check for a truthy search value:

let myArray = []

if (this.parameter && this.search