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>）

问题

[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通过props传递数据，并MainTable通过events向其父对象发送用户操作。它可能看起来像这样：

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

上面的内容应该足以使您更好地了解如何做并开始解决您的问题。

如果有人遇到我遇到的同样愚蠢的问题，请确保您的组件具有正确拼写的' data '属性。（例如data，而不是date）

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

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

就我而言，原因是，我只忘记了结帐

</script>

标签。

但这导致了相同的错误消息。

这可能是由于拼写错误引起的

我在脚本结束标记处遇到错字

</sscript>

如果使用两次vue实例。然后它将给您这个错误。例如在app.js中，在视图文件中您自己的脚本标签。只需使用一次

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

同样，如果有人像我一样挣扎，请注意，方法是区分大小写的词：

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

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

“方法”应该是“方法”

这很可能是保留的vuejs变量的拼写错误。我到达这里是因为我拼写错误computed:并且vuejs无法识别我的计算出的属性变量。因此，如果您遇到此类错误，请先检查拼写！

我在实例化期间尝试将组件属性分配给状态属性时遇到此错误

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

methods:在中<script>，我有两个显示，您可以花几个小时来寻找一个非常简单的错误。

我的问题是我将这些方法放在数据对象中。像这样格式化它，它将很好地工作。

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

如果遇到此问题，请检查以确保没有

methods: {
...
}

要么

computed: {
...
}

两次宣布

就我而言，这是一个赋予我错误，正确编写并且仍然在控制台中给我错误的属性。我搜索了很多东西，但对我没有任何帮助，直到我给他Ctrl + F5和Voilá！错误已删除。：'v