Saat ini saya mendapatkan kesalahan ini:

Uncaught TypeError: Tidak dapat menyetel properti 'render' dari undefined

Tidak dapat menemukan elemen: #main

Ini kode yang saya miliki, saya sudah mencoba mencari jawaban lain tetapi sepertinya tidak membantu. Saya mencoba membuat Filter Pencarian sederhana menggunakan VueJs Vuetify dan JavaScript biasa.

//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>

Bagaimana cara memperbaiki kesalahan ini? :)

3
John Pena 22 Oktober 2019, 23:18

1 menjawab

Jawaban Terbaik

Tidak yakin apakah ini penyebabnya, tetapi Anda tidak boleh membuat instance Vue di dalam satu komponen file.

Alih-alih ini:

<script>

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

</script>

Anda harus melakukan ini:

<script>

export default {
  ...
}

</script>

Kedua, Anda mencoba memasang komponen Vue utama ke elemen #main yang tidak ada di DOM karena berada di dalam templat komponen utama. Ini adalah masalah ayam-dan-telur.

Anda seharusnya sudah memiliki elemen seperti <div id="main"></div> di suatu tempat di DOM sebelum Anda mencoba memasang komponen Vue ke dalamnya.

Opsi komponen el hanya boleh digunakan bila Anda ingin komponen dipasang ke elemen yang ada setelah dibuat. Untuk komponen yang dapat digunakan kembali (yaitu bukan komponen root), Anda biasanya tidak menginginkan ini.

3
Decade Moon 22 Oktober 2019, 23:12