Question

现在我遇到这些错误：

未捕获的TypeError：无法设置未定义的属性“ render”

找不到元素：#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组件安装到DOM中不存在的#main元素上，因为它位于主组件的模板内。这是一个chicken-and-egg问题。

在尝试将Vue组件安装到DOM之前，您应该已经在DOM中的某处有了<div id="main"></div>这样的元素。

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

未捕获的TypeError：无法设置未定义的属性“ Render”

1 个答案: