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

小宇宙猴子2020-03-10

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

猿飞云斯丁2020/03/10 14:06:05

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

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

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

“方法”应该是“方法”

樱小卤蛋2020/03/10 14:06:05

如果有人遇到与我同样的傻问题，请确保您的组件具有正确拼写的data属性。

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

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

注意我输入了date（）。应该是data（）。

Eva蛋蛋番长2020/03/10 14:06:05

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