Vue警告：实例上未定义属性“搜索”

Question

我正在使用 Django 服务器创建一个 Web 应用程序，该服务器使用来自 rest_framework 的 api 和 Vue 作为前端（特别是 Nuxtjs）。

尝试创建“搜索过滤栏”时出现此错误，我不知道为什么：

ERROR [Vue 警告]：属性或方法“搜索”未在实例上定义，但 在渲染期间引用。确保此属性是反应性的， 无论是在数据选项中，还是对于基于类的组件，通过 初始化属性。看： 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 : ''
    }
}