Question

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

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

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

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

1 个答案: