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

Question

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

Property or method "searchfunc" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components)

main.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>

Answer 1

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

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

main.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>

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

Vue property or method is not defined on the instance but referenced during render?

javascript

vue.js

vue-component

vuejs2

vue-cli

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

Vue property or method is not defined on the instance but referenced during render?

javascript

vue.js

vue-component

vuejs2

vue-cli

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