javascript - 未捕获的类型错误 : Cannot Set Property 'Render' of Undefined

Question

现在我收到这些错误:

未捕获的类型错误:无法设置未定义的属性“渲染”

找不到元素:#main

这是我的代码，我试图寻找其他答案，但它们似乎没有帮助。我正在尝试使用 VueJs Vuetify 和纯 JavaScript 创建一个简单的搜索过滤器。

//main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import VueResource from 'vue-resource'
import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

Vue.use(VueResource)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  components: { App },
  render: h => h(App)
}).$mount('#app')

<!-- Vue Page -->

<template>
<div id="main">
Search: <input type="text" v-model="search"/>   
<div v-bind:v-for="customer in filteredCustomers">
 <span>{{customer.name}}</span>
</div>
</div>
</template>

<script>
const app = new Vue({
  el: "#main",
  data: function(){
          return {
          search: '',
          customers: [
            { id: '1', name: 'Something', },
            { id: '2', name: 'Something else', },
            { id: '3', name: 'Something random', },
            { id: '4', name: 'Something crazy', }
          ]};
  },
  computed:
  {
      filteredCustomers:function()
      {
         var self=this;
         return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
         //return this.customers;
      }
  }
  });
</script>

如何修复这些错误？ :)

Answer 1

不确定这是否是原因，但您不应该在单个文件组件中实例化 Vue 实例。

取而代之的是:

<script>

const app = new Vue({
  ...
})

</script>

你应该这样做:

<script>

export default {
  ...
}

</script>

其次，您正在尝试将主 Vue 组件安装到 #main 上DOM 中不存在的元素，因为它在主要组件的模板中。这是 chicken-and-egg问题。

你应该已经有了像<div id="main"></div>这样的元素在尝试将 Vue 组件挂载到 DOM 的某个位置之前。

el component 选项只应在您希望在实例化后将组件安装到现有元素上时使用。对于可重用组件(即不是根组件)，您通常不希望这样做。