Vue Warn: property "search" is not defined on instance - django

Question

i'm creating a web app with a Django server with api from rest_framework and Vue as frontend (Nuxtjs in particular).
Trying to create a "search filter bar" i've got this error and i don't know why:
ERROR [Vue warn]: Property or method "search" is not defined on the instance but
referenced during render. Make sure that this property is reactive,
either in the data option, or for class-based components, by
initializing the property. See:
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
This is my file.vue
<template>
<div>
<v-text-field v-model="search" label="search conditions" outlined dense></v-text-field>
</div>
<div>
<v-list v-for="condition in filteredConditions" :key="condition.id" >
<v-list-item>
<condition-card :onDelete="deleteCondition" :condition="condition"></condition-card>
</v-list-item>
</v-list>
</div>
</div>
</template>
<script>
import ConditionCard from "~/components/ConditionCard.vue";
export default {
head() {
return {
title: "Conditions list",
search: ""
};
},
components: {
ConditionCard
},
async asyncData({ $axios, params }) {
try {
let query = await $axios.$get(`/conditions/`);
if (query.count > 0){
return { conditions: query.results }
}
return { conditions: [] };
} catch (e) {
return { conditions: [] };
}
},
data() {
return {
conditions: []
};
},
...
...
computed: {
filteredConditions: function(){
return this.conditions.filter((condition) => {
return condition.name.toLowerCase().match(this.search.toLocaleLowerCase())
});
}
}
};
</script>
<style scoped>
</style>
The api is:
{"count":15,
"next":null,
"previous":null,
"results":[{"id":1,
"name":"Blinded",
"description":"A blinded creature can't see...",
"source_page_number":290},
{"id":2,
"name":"Charmed",
"description":"A charmed creature can't...",
...
...

Answer 1

Try to move the search variable from head() to data()
head() {
return {
title: "Conditions list"
}
},
...
data(){
return{
conditions: [],
search : ''
}
}