时间戳

首页 > 解决方案 > Vue警告：实例上未定义属性“搜索”

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

问题描述

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

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

错误 [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...",
              ...
              ...

标签： djangovue.jsdjango-rest-frameworkvuetify.jsnuxt.js

解决方案

尝试将search变量head()从data() 

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

推荐阅读