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

[Vue warn]: Property or method is not defined on the instance but referenced during render

提问by Lorenzo D'Isidoro

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];
    }
  }
});

With the above code, the error below occurs when the button is clicked.

使用上面的代码，单击按钮时会出现以下错误。

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

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

回答by Wing

Problem

问题

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

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

The error is occurring because the changeSettingmethod is being referenced in the MainTablecomponent here:

发生错误是因为在此处changeSetting的MainTable组件中引用了该方法：

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

However the changeSettingmethod is not defined in the MainTablecomponent. It is being defined in the root component here:

但是该changeSetting方法并未在MainTable组件中定义。它在此处的根组件中定义：

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

What needs to be remembered is that properties and methods can only be referenced in the scope where they are defined.

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

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

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

You can read more about component compilation scope in Vue's documentation.

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

What can I do about it?

我该怎么办？

So far there has been a lot of talk about defining things in the correct scope so the fix is just to move the changeSettingdefinition into the MainTablecomponent?

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

It seems that simple but here's what I recommend.

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

You'd probably want your MainTablecomponent to be a dumb/presentational component. (Hereis something to read if you don't know what it is but a tl;dr is that the component is just responsible for rendering something – no logic). The smart/container element is responsible for the logic – in the example given in your question the root component would be the smart/container component. With this architecture you can use Vue's parent-child communication methods for the components to interact. You pass down the data for MainTablevia propsand emit user actions from MainTableto its parent via events. It might look something like this:

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

The above should be enough to give you a good idea of what to do and kickstart resolving your issue.

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

回答by tno2007

Should anybody land with the same silly problem I had, make sure your component has the 'data' property spelled correctly. (eg. data, and not date)

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

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

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

回答by frankfurt-laravel

In my case the reason was, I only forgot the closing

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

</script>

tag.

标签。

But that caused the same error message.

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

回答by Hamza Khan

If you use two times vue instance. Then it will give you this error. For example in app.jsand your own script tag in view file. Just use one time

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

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

回答by bibs

It's probably caused by spelling error

可能是拼写错误造成的

I got a typo at script closing tag

我在脚本结束标记处输入错误

</sscript>

回答by Daniel Katz

Adding my bit as well, should anybody struggle like me, notice that methodsis a case-sensitive word:

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

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

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

'Methods' should be 'methods'

“方法”应该是“方法”

回答by mahatmanich

It is most likely a spelling error of reserved vuejs variables. I got here because I misspelled computed:and vuejs would not recognize my computed property variables. So if you have an error like this, check your spelling first!

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

回答by I Want Answers

I got this error when I tried assigning a component property to a state property during instantiation

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

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