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];
}
}
});
使用上面的代码，单击按钮时会出现以下错误。
[Vue warn]：属性或方法"changeSetting"未在实例上定义，但在渲染期间引用。
<MainTable>）
答案
问题
[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];
}
}
});
需要记住的是，属性和方法只能在它们定义的范围内引用。
Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.
您可以在 Vue 中阅读有关组件编译范围的更多信息文档。
我能做什么呢？
到目前为止，已经有很多关于在正确范围内定义事物的讨论，因此解决方法只是移动changeSetting定义为MainTable成分？
看起来很简单，但这就是我的推荐。
你可能想要你的MainTable组件成为哑/演示组件。 这里如果您不知道它是什么，那么可以阅读它，但是 tl;dr 是组件只负责渲染某些内容 - 没有逻辑）。MainTable通过道具并发出用户操作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
},
},
}),
上述内容应该足以让您很好地了解该怎么做并开始解决您的问题。