var MainTable = Vue.extend({
  template: "<ul>" +
    "<li v-for='(set,index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  data: function() {
    return data;
  }
});

Vue.component("main-table", MainTable);

data.settingsSelected = {};
var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

Dengan kode di atas, kesalahan di bawah ini terjadi saat tombol diklik.

[Vue warn]: Properti atau metode "changeSetting" tidak ditentukan pada instance tetapi direferensikan selama render. Pastikan untuk mendeklarasikan properti data reaktif dalam opsi data. (ditemukan di <MainTable>)

Masalah

[Vue warn]: Property or method "changeSetting" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <MainTable>)

Kesalahan terjadi karena changeSettingmetode ini direferensikan dalam MainTablekomponen di sini:

    "<button @click='changeSetting(index)'> Info </button>" +

Namun changeSettingmetode ini tidak ditentukan dalam MainTablekomponen. Ini didefinisikan dalam komponen root di sini:

var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

Yang perlu diingat adalah bahwa properti dan metode hanya dapat direferensikan dalam lingkup tempat mereka didefinisikan.

Segala sesuatu di template induk dikompilasi dalam lingkup induk; semua yang ada di templat anak dikompilasi dalam lingkup anak.

Anda dapat membaca lebih lanjut tentang ruang lingkup kompilasi komponen di dokumentasi Vue .

Apa yang dapat saya lakukan?

Sejauh ini sudah banyak pembicaraan tentang pendefinisian hal-hal dalam lingkup yang benar sehingga perbaikannya hanya dengan memindahkan changeSettingdefinisi ke dalam MainTablekomponen?

Tampaknya sesederhana itu tetapi inilah yang saya rekomendasikan.

Anda mungkin ingin MainTablekomponen Anda menjadi komponen yang bodoh / presentasi. ( Ini adalah sesuatu untuk dibaca jika Anda tidak tahu apa itu kecuali tl; dr adalah bahwa komponen hanya bertanggung jawab untuk merender sesuatu - tidak ada logika). Elemen smart / container bertanggung jawab atas logika tersebut - dalam contoh yang diberikan dalam pertanyaan Anda, komponen root adalah komponen smart / container. Dengan arsitektur ini Anda dapat menggunakan metode komunikasi orangtua-anak Vue agar komponen dapat berinteraksi. Anda menurunkan data MainTablemelalui props dan mengirimkan tindakan pengguna dari MainTableke induknya melalui peristiwa . Ini mungkin terlihat seperti ini:

Vue.component('main-table', {
  template: "<ul>" +
    "<li v-for='(set, index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  props: ['settings'],
  methods: {
    changeSetting(value) {
      this.$emit('change', value);
    },
  },
});


var app = new Vue({
  el: '#settings',
  template: '<main-table :settings="data.settings" @change="changeSetting"></main-table>',
  data: data,
  methods: {
    changeSetting(value) {
      // Handle changeSetting
    },
  },
}),

Hal di atas seharusnya cukup untuk memberi Anda gagasan bagus tentang apa yang harus dilakukan dan mulai menyelesaikan masalah Anda.

Jika ada orang yang mendapatkan masalah konyol yang sama dengan yang saya alami, pastikan komponen Anda memiliki properti ' data ' yang dieja dengan benar. (mis. data , dan bukan tanggal )

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      name: ""
    };
  }
</script>

Dalam kasus saya, alasannya adalah, saya hanya lupa penutupannya

</script>

menandai.

Tapi itu menyebabkan pesan kesalahan yang sama.

Ini mungkin disebabkan oleh kesalahan ejaan

Saya mendapat kesalahan ketik pada tag penutup skrip

</sscript>

Jika Anda menggunakan dua kali vue instance. Maka itu akan memberi Anda kesalahan ini. Misalnya di app.js dan tag skrip Anda sendiri di file tampilan. Cukup gunakan satu kali

 const app = new Vue({
    el: '#app',
});

Menambahkan bit saya juga, jika ada yang berjuang seperti saya, perhatikan bahwa metode adalah kata yang peka huruf besar / kecil:

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  Methods: {
      name() {return '';}
  }
</script>

'Metode' harus menjadi 'metode'

Kemungkinan besar ini adalah kesalahan ejaan variabel vuejs yang dipesan. Saya sampai di sini karena saya salah eja computed:dan vuejs tidak akan mengenali variabel properti terhitung saya. Jadi jika Anda mengalami kesalahan seperti ini, periksa ejaan Anda terlebih dahulu!

Saya mendapat kesalahan ini ketika saya mencoba menetapkan properti komponen ke properti negara selama instantiation

export default {
 props: ['value1'],
 data() {
  return {
   value2: this.value1 // throws the error
   }
  }, 
 created(){
  this.value2 = this.value1 // safe
 }
}

Saya punya dua methods:di <script>, pergi untuk menunjukkan, bahwa Anda dapat menghabiskan berjam-jam mencari sesuatu yang merupakan kesalahan sederhana.

Masalah saya adalah saya menempatkan metode di dalam objek data saya. format saja seperti ini dan itu akan bekerja dengan baik.

<script>
module.exports = {
    data: () => {
        return {
            name: ""
        }
    },
    methods: {
        myFunc() {
            // code
        }
    }
}
</script>

Jika Anda mengalami masalah ini, periksa untuk memastikan Anda tidak memilikinya

methods: {
...
}

atau

computed: {
...
}

dideklarasikan dua kali

Dalam kasus saya itu adalah properti yang memberi saya kesalahan, tulisan yang benar dan masih memberi saya kesalahan di konsol. Saya mencari begitu banyak dan tidak ada yang berhasil untuk saya, sampai saya memberinya Ctrl + F5 dan Voilá! kesalahan telah dihapus. : 'v