Vue Warn: свойство "search" не определено в экземпляре

Question

Я создаю веб-приложение с сервером Django, используя api из rest_framework и Vue в качестве внешнего интерфейса (в частности, Nuxtjs).

Пытаясь создать «панель фильтра поиска», я получаю эту ошибку ия не знаю, почему:

ОШИБКА [Vue warn]: свойство или метод "search" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. См .: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Это мой файл.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>

API:

{"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

Попробуйте переместить переменную search с head() на data()

head() {
    return {
        title: "Conditions list"
    }
},
...
data(){
    return{
        conditions: [],
        search : ''
    }
}