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

Posted 2023-02-23

【中文标题】Vue警告：实例上未定义属性“搜索”

【英文标题】：Vue Warn: property "search" is not defined on instance

【发布时间】：2020-02-03 13:29:07

【问题描述】：

我正在使用 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...",
              ...
              ...

【问题讨论】：

也许您的意思是在数据对象中进行搜索？

没错，在数据对象中移动搜索：''，程序可以工作。谢谢

【参考方案1】：

尝试将search 变量从head() 移动到data()

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