Проблема
[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>)
Ошибка возникает из-за changeSetting
ссылки на метод в MainTable
компоненте здесь:
"<button @click='changeSetting(index)'> Info </button>" +
Однако changeSetting
метод не определен в MainTable
компоненте. Он определяется здесь в корневом компоненте:
var app = new Vue({
el: "#settings",
data: data,
methods: {
changeSetting: function(index) {
data.settingsSelected = data.settings[index];
}
}
});
Следует помнить, что на свойства и методы можно ссылаться только в той области, в которой они определены.
Все в родительском шаблоне компилируется в родительской области; все в дочернем шаблоне компилируется в дочерней области.
Вы можете узнать больше о масштабах компиляции компонентов в документации Vue .
Что я могу с этим поделать?
До сих пор было много разговоров об определении вещей в правильной области, поэтому исправление состоит в том, чтобы просто переместить changeSetting
определение в MainTable
компонент?
Это кажется таким простым, но вот что я рекомендую.
Вы, вероятно, захотите, чтобы ваш MainTable
компонент был тупым / презентационным компонентом. ( Вот что можно прочитать, если вы не знаете, что это, но tl; dr заключается в том, что компонент просто отвечает за рендеринг чего-либо - никакой логики). За логику отвечает элемент smart / container - в примере, приведенном в вашем вопросе, корневым компонентом будет компонент smart / container. С этой архитектурой вы можете использовать методы связи родитель-потомок Vue для взаимодействия компонентов. Вы передаете данные для свойстваMainTable
via и отправляете действия пользователя из родительского объекта через события . Это может выглядеть примерно так: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) {
},
},
}),
Вышеупомянутого должно быть достаточно, чтобы дать вам хорошее представление о том, что делать, и начать решение вашей проблемы.
changeSetting
вMainTable
компонент.