小开

最佳答案

问题

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

出现这个错误是因为在这里的 MainTable组件中引用了 changeSetting方法:

    "<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组件是一个哑的/表示的组件。(如果您不知道给你是什么而只知道 tl，那么可以读取它; 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
},
},
}),

上面的内容应该足以让你知道该做什么，并开始解决你的问题。

小开

如果有人遇到我遇到的同样愚蠢的问题，请确保您的组件的“ 资料”属性拼写正确。(例如:。而不是约会)

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


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

小开

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

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


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

“方法”应该是“方法”

小开

它很可能是保留 vuejs 变量的拼写错误。我来这里是因为我拼错了 computed:和 vuejs 不能识别我的计算属性变量。所以如果你有这样的错误，首先检查你的拼写！

小开

对我来说，原因是，我只是忘记了结案陈词

</script>

标签。

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

小开

如果使用两次 vue 实例。然后它会给你这个错误。例如，在 应用程序中，在视图文件中使用自己的脚本标记。就用一次

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

小开

可能是拼写错误造成的

我在结尾标签处打错字了

</sscript>

小开

当我尝试在实例化期间将组件属性分配给状态属性时，出现了这个错误

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

小开

我有两个 methods:在 <script>，去显示，你可以花几个小时寻找的东西，这是如此简单的错误。

小开

我的问题是我把方法放在了我的数据对象中。像这样格式化就可以了。

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

小开

在我的情况下，它是一个属性，给我的错误，正确的写作，并仍然给我在控制台中的错误。我搜索了这么多，没有工作为我，直到我给他 Ctrl + F5和瞧！错误被删除。歌曲:’v

小开

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

methods: {
...
}

或者

computed: {
...
}

申报了两次

小开

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

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

为了解决这个问题(考虑到您遵循了已接受答案中的建议) ，在 Parent 组件(提取数据并传递给子组件的组件)中，我这样做了:

// 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" />

这清除了这个错误。我再次将其部署到消防基地托管，瞧！

希望这个能帮到你。

小开

记得归还财产

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

因此，请记住在结尾添加 return 语句:

export default {


setup(){


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


return {search}


}
}

注意: 我正在使用组合 API

小开

就我而言，我把它写成了“方法”而不是“方法”。太愚蠢了。浪费了大约1个小时。

小开

注意两次警告: < em > Property _ _ _ _ _ 在呈现期间被访问，但没有在实例上定义。所以你必须在数据函数中定义它，例如，通常在 Vuejs 应用中实例化变量。这是我的案子，这样问题就解决了。那都是民间的！

小开

在我的例子中，由于路由器名称不在字符串中:

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

在字符串中更改为路由器名称:

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

小开

在我的例子中，我忘记添加 return关键字:

computed: {
image(){
this.productVariants[this.selectedVariant].image;
},
inStock(){
this.productVariants[this.selectedVariant].quantity;
}
}

改为:

computed: {
image(){
return this.productVariants[this.selectedVariant].image;
},
inStock(){
return this.productVariants[this.selectedVariant].quantity;
}
}

小开

在我的例子中，我试图用以下方法将一个硬编码的文本值传递给另一个组件:

 ChildComponent(:displayMode="formMode")

什么时候应该:

ChildComponent(:displayMode="'formMode'")

注意单引号表示文本，而不是调用组件内部的局部变量。

小开

此错误的一些常见情况

确保组件的资料属性拼写正确
确保您的模板是在另一个组件的模板中定义的 bot。
确保在数据对象中定义了变量
请确保您的路由器名称为字符串

再找些溶液

小开

如果使用 Vue3<script setup>样式，请确保在开始 script 标记中指定了 setup:

<script setup>

我已经陷入旧的习惯，只创建了一个块与 <script>，但它需要一段时间来注意到它。

Https://v3.vuejs.org/api/sfc-script-setup.html

小开

如果您有任何道具或导入的变量(从外部。Js 文件)确保使用这样创建的文件正确设置它们;

确保初始化那些变量:

import { var1, var2} from './constants'


//or


export default {
data(){
return {
var1: 0,
var2: 0,
var3: 0,
},
},
props: ['var3'],
created(){
this.var1 = var1;
this.var2 = var2;
this.var3 = var3;
}

小开

似乎有很多情况可以触发这个错误。这是我刚刚解决的另一个问题。

我在数据部分声明了变量 actionRequredCount，但是在将变量作为参数传递给组件时，我没有将 Count 中的 C 大写。

这里的变量是正确的:

data: () => {
return{
actionRequiredCount: ''
}
}

在我的模板中，它是不正确的(注意“ count”中没有大写 c) :

  <MyCustomModule :actionRequiredCount="actionRequiredcount"/>

希望这对谁有帮助。

小开

大多数人在这里犯错误是因为:

他们忘记声明/使用的打字错误或东西
相反，在几个地方做了

为了避免打字错误的问题，我建议始终使用 Vue VSCode 片段，这样您就不必手工编写任何东西，而是使用 vbase、 vdata、 vmethod并获取为您生成的那些部分。
这些是为了 Vue3。
当然，您也可以通过执行以下创建自己的代码片段。

还要确保你正确地把所有正确的名字写成这里显示，下面是一个列表:

资料
道具
计算出来的
方法
看好了
发射
曝光

至于第二部分，我通常建议在代码库中搜索给定的关键字。因此，就像 OP 中的 cmd + f + changeSetting一样，看看它是否在 data、 methods或类似的地方缺少一个声明。

或者更好的方法是使用 ESlint 配置，这样在代码库中出现任何问题时都会得到警告。
下面是如何使用 Nuxt 项目 + ESlint + Prettier 来实现这种设置，以便在获得快速格式化的同时，以最有效的方式防止不良实践！

小开

另一种常见的情况是:

您有一个组件(子组件)扩展另一个组件(父组件)
在父组件上有一个在 methods或 computed下定义的属性或方法 xyz。
您正在尝试使用父组件的 xyz，但是您的子组件定义了它自己的 methods或 computed

带有问题的示例代码

// PARENT COMPONENT
export default {
computed() {
abc() {},
xyz() {} // <= needs to be used in child component
},
...
}


// CHILD COMPONENT
export default {
extends: myParentComponent,
computed() {
childProprty1() {},
childProprty2() {}
}
}

解决办法

在这种情况下，您需要在 computed下重新定义 xyz计算属性

解决方案1:

重新定义 xyz并从父组件复制代码

// CHILD COMPONENT
export default {
extends: myParentComponent,
computed() {
xyz() {
// do something cool!
},
childProprty1() {},
childProprty2() {}
}
}

解决方案2

重用父组件代码重新定义 xyz属性(没有代码冗余)

// CHILD COMPONENT
export default {
extends: myParentComponent,
computed() {
xyz() {
return this.$parent.$options.computed.xyz
},
childProprty1() {},
childProprty2() {}
}
}

小开

对我来说，这是因为我写的是 method:而不是 methods:(复数)。这是一个愚蠢的错误，但它可能发生:)

[ Vue police ] : 属性或方法不是在实例上定义的，而是在呈现过程中引用的