javascript - Uncaught TypeError: Cannot Set Property 'Render' of Undefined - Stack Overflow

admin管理员组

文章数量:1406308

Right now I am getting these errors:

Uncaught TypeError: Cannot set property 'render' of undefined

Cannot find element: #main

Here is the code I have, I have tried to look for other answers but they don't seem to help. I am trying to create a simple Search Filter using VueJs Vuetify and plain 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,
  ponents: { 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', }
          ]};
  },
  puted:
  {
      filteredCustomers:function()
      {
         var self=this;
         return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
         //return this.customers;
      }
  }
  });
</script>

Right now I am getting these errors:

Uncaught TypeError: Cannot set property 'render' of undefined

Cannot find element: #main

Here is the code I have, I have tried to look for other answers but they don't seem to help. I am trying to create a simple Search Filter using VueJs Vuetify and plain 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,
  ponents: { 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', }
          ]};
  },
  puted:
  {
      filteredCustomers:function()
      {
         var self=this;
         return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
         //return this.customers;
      }
  }
  });
</script>

How can I fix these errors? :)

• javascript
• html
• css
• vue.js

Share Improve this question Follow asked Oct 22, 2019 at 20:18 John PenaJohn Pena 3511 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Not sure if this is the cause, but you shouldn't be instantiating a Vue instance inside a single file ponent.

Instead of this:

<script>

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

</script>

you should do this:

<script>

export default {
  ...
}

</script>

Secondly, you're trying to mount the main Vue ponent onto the #main element which doesn't exist in the DOM because it is within the template of the main ponent. This is a chicken-and-egg problem.

You should already have a element like <div id="main"></div> somewhere in the DOM before you try to mount a Vue ponent onto it.

The el ponent option should only be used when you want the ponent to be mounted onto an existing element after it is instantiated. For reusable ponents (i.e. not the root ponent) you typically do not want this.

本文标签： javascriptUncaught TypeError Cannot Set Property 39Render39 of UndefinedStack Overflow