\[Vue 警告\]：属性或方法未在实例上定义，但在渲染期间引用

Question

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 警告]：属性或方法“changeSetting”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。 （在 <MainTable> 中找到）

原文由 Lorenzo D‘Isidoro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题

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

发生错误是因为这里的 MainTable 组件中引用了 changeSetting 方法：

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

但是，在 MainTable 组件中没有定义 changeSetting 方法。它在这里的根组件中定义：

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

需要记住的是，属性和方法只能在定义它们的范围内被引用。

父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围内编译。

您可以在 Vue 的 文档 中阅读有关组件编译范围的更多信息。

我能做些什么呢？

到目前为止，已经有很多关于在正确范围内定义事物的讨论，所以修复只是将 changeSetting 定义移动到 MainTable 组件中？

看起来很简单，但这是我推荐的。

您可能希望您的 MainTable 组件成为一个哑/展示组件。 （如果你不知道它是什么， 这里 有一些东西可以阅读，但是一个 tl;dr 是组件只负责渲染某些东西 - 没有逻辑）。智能/容器元素负责逻辑 - 在您问题中给出的示例中，根组件将是智能/容器组件。使用这种架构，您可以使用 Vue 的父子通信方法让组件进行交互。您通过 props 传递 MainTable 的数据，并通过 events 将用户操作从 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
 },
 },
 }),

以上内容应该足以让您很好地了解该做什么并开始解决您的问题。

原文由 Wing 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果有人遇到我遇到的同样愚蠢的问题，请确保您的组件的“ 数据”属性拼写正确。 （例如 _数据_，而不是 _日期_）

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

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

原文由 tno2007 发布，翻译遵循 CC BY-SA 4.0 许可协议