[Vue warn]: Properti atau metode tidak didefinisikan pada instance tetapi direferensikan selama render

95
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>)

Lorenzo D'Isidoro
sumber
Komponen Anda tidak memiliki akses ke metode yang ditentukan di Vue Anda. Anda perlu menambahkan metode changeSettingke MainTablekomponen.
Bert

Jawaban:

95

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.

Sayap
sumber
3
Apakah ini pendekatan yang paling disukai saat ini? Hal-hal terus berkembang pesat di Vue jadi saya pikir saya akan bertanya
Aseem
18

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>
tno2007
sumber
1
bro serius, maksud saya serius Terima kasih
Noni
2
Saya di sini pada tahun 2020, saya menulis DATE
Paaksing
lmfao komentar ini baru saja menyelamatkan saya
Cris Ravazzano
Ini memunculkan kesalahan yang sama saat Anda salah mengeja nama properti Anda. Bagi saya itu terjadi karena saya menggunakan jamak datasdi template.
totymedli
8

Dalam kasus saya, alasannya adalah, saya hanya lupa penutupannya

</script>

menandai.

Tapi itu menyebabkan pesan kesalahan yang sama.

frankfurt-laravel
sumber
4

Ini mungkin disebabkan oleh kesalahan ejaan

Saya mendapat kesalahan ketik pada tag penutup skrip

</sscript>
oto
sumber
3

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',
});
Hamza Khan
sumber
2

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'

Daniel Katz
sumber
2

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!

mahatmanich.dll
sumber
2

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 Ingin Jawaban
sumber
2

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

learncodes123
sumber
2

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>
Pwntastic
sumber
2

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

methods: {
...
}

atau

computed: {
...
}

dideklarasikan dua kali

Chuks Jr.
sumber
1

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

Jennifer Miranda Beuses
sumber