Set data to empty string on vuetify text field clearable?

Question

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

Boussadjra Brahim · Answer 1 · 2019-09-09T21:36:55.583

2

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());
        })
    }

edited Sep 09 '19 at 21:36

answered Sep 09 '19 at 21:33

Boussadjra Brahim

82,684
19
144
164

Unfortunately, did not work. shows no data available. – Somethingwhatever Sep 09 '19 at 21:35
try `!this.search || download.barcode.includes(this.search.toLowerCase());` – Boussadjra Brahim Sep 09 '19 at 21:37
Still doesn't quite work because it does not return the values. – Somethingwhatever Sep 09 '19 at 21:41
It is still setting the value back to null. – Somethingwhatever Sep 09 '19 at 21:42
it should work if you set `!this.search || download.barcode.includes(this.search.toLowerCase());` or `this.search==null || download.barcode.includes(this.search.toLowerCase());` – Boussadjra Brahim Sep 09 '19 at 21:48
1

This suggestion would make the filter incorrectly return all items regardless of the search input. The point of the filter is to collect items whose barcode **matches** the search input. Allowing `!this.search` or `this.search === null` prevents the OP's error, but also breaks the intended functionality. – tony19 Sep 13 '19 at 07:16

score 2 · Answer 2 · answered Sep 09 '19 at 21:39

2

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

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

answered Sep 09 '19 at 21:39

Kousika Ganesan

539
1
6
22

score 0 · Answer 3 · answered Sep 09 '19 at 23:42

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

let myArray = []

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

return myArray

Set data to empty string on vuetify text field clearable?

3 Answers3