[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"未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.(找到<MainTable>)

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

发生错误是因为此处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组件是一个愚蠢/表达的组件.(如果你不知道它是什么,那么这里有一些东西要读; dr是这个组件只负责呈现某些东西 - 没有逻辑).智能/容器元素负责逻辑 - 在您的问题中给出的示例中,根组件将是智能/容器组件.使用此体系结构,您可以使用Vue的父子通信方法进行交互.您传递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
    },
  },
}),

以上内容应该足以让您了解如何做和kickstart解决您的问题.

Answer 2

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

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

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

Answer 3

就我而言，原因是，我只忘记了关闭

</script>

标签。

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

Answer 4

可能是拼写错误造成的

我在脚本结束标记处出现拼写错误

</sscript>

Answer 5

记得归还财产

看到属性“search”在渲染期间被访问但未在实例上定义的setup(){}另一个原因是当您忘记返回函数中的变量时

所以记得在最后添加return语句：

export default {

  setup(){

    const search = ref('')
    //Whatever code

    return {search}

  }
}

注意：我正在使用 Composition API

Answer 6

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

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

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

“方法”应该是“方法”

Answer 7

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

methods: {
...
}

或者

computed: {
...
}

宣布两次