[Vue警告]：属性或方法未在实例上定义，但在呈现期间引用 [英] [Vue warn]: Property or method is not defined on the instance but referenced during render

问题描述

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]：属性或方法changeSetting未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。 （见于< MainTable> ）

推荐答案

问题

Problem

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

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

The error is occurring because the changeSetting method is being referenced in the MainTable component here:

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

但是未定义 changeSetting 方法在 MainTable 组件中。它在根组件中定义：

However the changeSetting method is not defined in the MainTable component. It is being defined in the root component here:

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.

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

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

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

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

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

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

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

你可能希望你的 MainTable 组件是一个哑/表示组件。 （如果您不知道它是什么，请此处只是一个tl; dr是组件负责呈现某些东西 - 没有逻辑。智能/容器元素负责逻辑 - 在您的问题中给出的示例中，根组件将是智能/容器组件。使用此体系结构，您可以使用Vue的父子通信方法进行交互。您通过传递 MainTable 的数据道具并通过 MainTable 向其父级发出用户操作-Eventsrel =noreferrer>事件。它可能看起来像这样：

You'd probably want your MainTable component to be a dumb/presentational component. (Here is 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 MainTable via props and emit user actions from MainTable to its parent via events. It might look something like this:

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.

这篇关于[Vue警告]：属性或方法未在实例上定义，但在呈现期间引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！