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];
    }
  }
});

Yukarıdaki kod ile buton tıklandığında aşağıdaki hata oluşur.

[Vue warn]: "changeSetting" özelliği veya yöntemi, örnekte tanımlanmaz, ancak oluşturma sırasında başvurulur. Veri seçeneğinde reaktif veri özelliklerini bildirdiğinizden emin olun. (içinde bulundu <MainTable>)

Sorun

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

Hata, changeSettingyönteme buradaki MainTablebileşende başvurulduğu için ortaya çıkıyor :

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

Ancak changeSettingyöntem MainTablebileşende tanımlanmamıştır . Burada kök bileşende tanımlanmaktadır:

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

Hatırlanması gereken şey, özelliklerin ve yöntemlerin yalnızca tanımlandıkları kapsamda referans alınabileceğidir.

Üst şablondaki her şey, üst kapsamda derlenir; alt şablondaki her şey alt kapsamda derlenir.

Vue'nun belgelerinde bileşen derleme kapsamı hakkında daha fazla bilgi edinebilirsiniz .

Bu konuda ne yapabilirim?

Şimdiye kadar, şeyleri doğru kapsamda tanımlamak hakkında çok fazla konuşma yapıldı, bu yüzden düzeltme sadece changeSettingtanımı MainTablebileşene taşımak mı?

Bu kadar basit görünüyor ama işte size tavsiye ettiğim şey.

Muhtemelen MainTablebileşeninizin aptal / sunumsal bir bileşen olmasını istersiniz . ( Burada ne olduğunu bilmiyorsanız okuyacağınız bir şey var ama bir tl; dr, bileşenin sadece bir şeyi işlemekten sorumlu olmasıdır - mantık yok). Akıllı / kapsayıcı öğesi, mantıktan sorumludur - sorunuzda verilen örnekte, kök bileşen akıllı / kapsayıcı bileşeni olacaktır. Bu mimari ile, bileşenlerin etkileşime girmesi için Vue'nun ebeveyn-çocuk iletişim yöntemlerini kullanabilirsiniz. Verileri propsMainTable aracılığıyla iletirsiniz ve etkinlikler aracılığıyla kullanıcı eylemlerini üst öğesinden yayınlarsınız . Şunun gibi görünebilir:MainTable

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
    },
  },
}),

Yukarıdakiler, size ne yapmanız gerektiği konusunda iyi bir fikir vermek ve sorununuzu çözmek için hızlı bir başlangıç ​​yapmak için yeterli olmalıdır.

Benim sahip olduğum aynı saçma problemi yaşayan biri olursa, bileşeninizin ' veri ' özelliğinin doğru yazıldığından emin olun. (ör. veriler , tarih değil )

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

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

Benim durumumda sebep, sadece kapanışı unuttum

</script>

etiket.

Ancak bu aynı hata mesajına neden oldu.

Muhtemelen yazım hatasından kaynaklanıyor

Komut dosyası kapanış etiketinde yazım hatası aldım

</sscript>

İki kez vue örneği kullanırsanız. O zaman size bu hatayı verecektir. Örneğin app.js'de ve görünüm dosyasında kendi komut dosyası etiketinizde. Sadece bir kez kullan

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

Benim de biraz daha ekleyerek, biri benim gibi mücadele ederse, yöntemlerin büyük / küçük harfe duyarlı bir kelime olduğuna dikkat edin :

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

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

'Yöntemler', 'yöntemler' olmalıdır

Büyük olasılıkla ayrılmış vuejs değişkenlerinin yazım hatasıdır. Buraya geldim çünkü yanlış computed:yazdım ve vuejs hesaplanan özellik değişkenlerimi tanımıyordu. Öyleyse, böyle bir hatayla karşılaşırsanız, önce yazımınızı kontrol edin!

Örnekleme sırasında bir state özelliğine bir bileşen özelliği atamayı denediğimde bu hatayı aldım

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

Bu kadar basit bir hata olan bir şeyi aramak için saatler harcayabileceğinizi göstermek methods:için iki tane vardı <script>.

Sorunum, yöntemleri veri nesnemin içine yerleştirmekti. sadece bu şekilde biçimlendirin ve güzelce çalışacaktır.

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

Bu sorunu yaşıyorsanız, sahip olmadığınızdan emin olun.

methods: {
...
}

veya

computed: {
...
}

iki kez ilan edildi

Benim durumumda bana hatayı, doğru yazımı veren ve yine de konsolda hata veren bir özellikti. O kadar çok arama yaptım ve Ctrl + F5 ve Voilá'yı verene kadar hiçbir şey benim için işe yaramadı! hata kaldırıldı. : 'v