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>
)
javascript
vue.js
vuejs2
vue-component
Lorenzo D'Isidoro
sumber
sumber
changeSetting
keMainTable
komponen.Jawaban:
Masalah
Kesalahan terjadi karena
changeSetting
metode ini direferensikan dalamMainTable
komponen di sini:"<button @click='changeSetting(index)'> Info </button>" +
Namun
changeSetting
metode ini tidak ditentukan dalamMainTable
komponen. 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.
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
changeSetting
definisi ke dalamMainTable
komponen?Tampaknya sesederhana itu tetapi inilah yang saya rekomendasikan.
Anda mungkin ingin
MainTable
komponen 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 dataMainTable
melalui props dan mengirimkan tindakan pengguna dariMainTable
ke 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.
sumber
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>
sumber
datas
di template.Dalam kasus saya, alasannya adalah, saya hanya lupa penutupannya
menandai.
Tapi itu menyebabkan pesan kesalahan yang sama.
sumber
Ini mungkin disebabkan oleh kesalahan ejaan
Saya mendapat kesalahan ketik pada tag penutup skrip
sumber
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', });
sumber
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'
sumber
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!sumber
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 } }
sumber
Saya punya dua
methods:
di<script>
, pergi untuk menunjukkan, bahwa Anda dapat menghabiskan berjam-jam mencari sesuatu yang merupakan kesalahan sederhana.sumber
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>
sumber
Jika Anda mengalami masalah ini, periksa untuk memastikan Anda tidak memilikinya
atau
dideklarasikan dua kali
sumber
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
sumber