问题

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 warn]：属性或方法“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 documentation中阅读有关组件编辑范围的更多信息。

我该怎么办？

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

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

您可能希望您的MainTable组件成为哑/表现组件。（Here是一个值得阅读的东西，如果你不知道它是什么，而不是tl; dr是该组件只负责渲染某些东西 - 没有逻辑。智能/容器元素负责逻辑 - 在您的问题中给出的示例中，根组件将是智能/容器组件。使用此架构，您可以使用Vue的父子通信方法进行交互。您通过props传递MainTable的数据，并通过events将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
    },
  },
}),

上述内容应足以让您了解如何做，并开始解决您的问题。

Answer 2

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

if line[4:6] == elements:
    "a_" + elements.append(line)

注意，我键入了 date（）。它应该是 data（）。

Answer 3

可能是拼写错误引起的

我在脚本结束标记处出现错字

</sscript>

Answer 4

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

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

Answer 5

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

methods: {
...
}

或

computed: {
...
}

声明两次

Answer 6

我在Screen.onkeypress()中有两个methods:，这表明，您可以花几个小时来寻找一个非常简单的错误。

Answer 7

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

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

Answer 8

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

Answer 9

虽然这里的一些答案可能很好，但没有一个对我的情况有帮助（这与 OP 的错误消息非常相似）。

这个错误需要修复，因为即使我的组件使用它们的数据（从 API 提取）呈现，当部署到 firebase 托管时，它也没有呈现我的一些组件（依赖数据的组件）。

为了修复它（并假设您遵循了已接受答案中的建议），在父组件（提取数据并传递给子组件的组件）中，我做到了：

// pulled data in this life cycle hook, saving it to my store
created() {
  FetchData.getProfile()
    .then(myProfile => {
      const mp = myProfile.data;
      console.log(mp)
      this.$store.dispatch('dispatchMyProfile', mp)
      this.propsToPass = mp;
    })
    .catch(error => {
      console.log('There was an error:', error.response)
    })
}
// called my store here
computed: {
    menu() {
        return this.$store.state['myProfile'].profile
    }
},

// then in my template, I pass this "menu" method in child component
 <LeftPanel :data="menu" />

这清除了那个错误。我再次将它部署到了 Firebase 托管和中提琴！

希望对你有所帮助。

Answer 10

记得归还财产

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

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

export default {

  setup(){

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

    return {search}

  }
}

注意：我使用的是 Composition API

Answer 11

就我而言，我将其写为“方法”而不是“方法”。那么蠢。浪费了大约 1 小时。

Answer 12

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

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

Answer 13

在我的情况下，我只是忘记了结帐

</script>

标签。

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

Answer 14

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

Answer 15

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

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

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

“方法”应为“方法”

Answer 16

看两次警告：在渲染期间访问了属性 _____，但未在实例上定义。 所以你必须在 data 函数中定义它，例如它通常在 Vuejs 应用程序中实例化变量。而且，这是我的情况，这样问题就解决了。都是这样的！

Answer 17

在我的情况下，由于路由器名称不在字符串中：

:to="{name: route-name, params: {id:data.id}}"

更改为字符串中的路由器名称：

:to="{name: 'router-name', params: {id:data.id}}"

Answer 18

我的是重新创建组件，错误消失了。好在我只是在第一部分。奇怪的。编辑：我正在使用组合 API

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

18 个答案:

问题

我该怎么办？