Problema
[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>)
O erro está ocorrendo porque o changeSetting
método está sendo referenciado no MainTable
componente aqui:
"<button @click='changeSetting(index)'> Info </button>" +
No entanto, o changeSetting
método não está definido no MainTable
componente. Ele está sendo definido no componente raiz aqui:
var app = new Vue({
el: "#settings",
data: data,
methods: {
changeSetting: function(index) {
data.settingsSelected = data.settings[index];
}
}
});
O que precisa ser lembrado é que propriedades e métodos só podem ser referenciados no escopo em que são definidos.
Tudo no modelo pai é compilado no escopo pai; tudo no modelo filho é compilado no escopo filho.
Você pode ler mais sobre o escopo de compilação do componente na documentação do Vue .
O que posso fazer a respeito?
Até agora, tem se falado muito sobre como definir as coisas no escopo correto, então a correção é apenas mover a changeSetting
definição para o MainTable
componente?
Parece tão simples, mas aqui está o que eu recomendo.
Você provavelmente quer que seu MainTable
componente seja um componente burro / de apresentação. ( Aqui está algo para ler se você não sabe o que é, mas um tl; dr é que o componente é apenas responsável por renderizar algo - sem lógica). O elemento smart / container é responsável pela lógica - no exemplo dado em sua pergunta, o componente raiz seria o componente smart / container. Com esta arquitetura, você pode usar os métodos de comunicação pai-filho do Vue para que os componentes interajam. Você passa os dados para MainTable
via props e emite ações do usuário MainTable
para seu pai por meio de eventos . Pode ser algo assim:
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) {
},
},
}),
O que foi dito acima deve ser suficiente para lhe dar uma boa ideia do que fazer e começar a resolver o seu problema.
changeSetting
aoMainTable
componente.