Vue属性或方法未在实例上定义但在渲染期间引用？

Posted 2023-02-16

【中文标题】Vue属性或方法未在实例上定义但在渲染期间引用？

【英文标题】：Vue property or method is not defined on the instance but referenced during render?

【发布时间】：2021-05-04 11:17:45

【问题描述】：

在在线编译器中尝试此代码时，它可以正常工作 但是在本地主机上我看到了这个问题：

属性或方法“searchfunc”未在实例上定义，但在渲染期间被引用。确保此属性是响应式的，无论是在数据选项中，还是对于基于类的组件）

ma​​in.js

var Hotels = [
   name: "Sham", city: "Damascus", bed: 1, price: 100, id: "h1" ,
   name: "Shahbaa", city: "Aleppo", bed: 3, price: 200, id: "h2" ,
   name: "abcd", city: "Homs", bed: 5, price: 350, id: "h3" ,
];

new Vue(
  router,
  store,
  render: (h) => h(App),
  searchs:'',
  Hotels,
  computed: 
    searchfunc() 
      return this.Hotels.filter((srh) => 
        return srh.price >= parseInt(this.searchs);
      );
    
  
).$mount("#app");

Home.vue

<template>
  <div class="home">

<form>
    <input
      type="text"
      v-model="searchs"
      placeholder="Search.."
      
    />
</form>
<p v-for="ps in searchfunc" :key="ps">ps.name</p>

  </div>
</template>

<script>

export default 
  name: "Home",
;
</script>

【参考方案1】：

当试图在模板（或渲染函数）中使用组件实例上不存在的属性或方法时，会发生此错误。

在这种情况下，这是因为 Home.vue 的模板中使用的 searchs 和 searchFunc 变量在实例下方找不到。它们在错误的文件中，需要移动到 Home.vue 中。数据也需要进入data 选项：

ma​​in.js

new Vue(
  router,
  store,
  render: (h) => h(App),
).$mount("#app");

Home.vue

<script>
const Hotels = [
   name: "Sham", city: "Damascus", bed: 1, price: 100, id: "h1" ,
   name: "Shahbaa", city: "Aleppo", bed: 3, price: 200, id: "h2" ,
   name: "abcd", city: "Homs", bed: 5, price: 350, id: "h3" ,
];
export default 
  name: "Home",
  data() 
    return 
      searchs: '',
      Hotels,
    
  ,
  computed: 
    searchfunc() 
      return this.Hotels.filter((srh) => 
        return srh.price >= parseInt(this.searchs);
      );
    
  
;
</script>