Categories
javascript vue.js vuejs2 vuetify.js

Set data to empty string on vuetify text field clearable?

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>