VueJS TypeError无法读取属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VueJS TypeError无法读取属性相关的知识,希望对你有一定的参考价值。

好的,所以我在2年多的时间里没有和Vue合作过,我正在给自己一个复习。问我这么简单的问题真的很傻,但我无法弄清楚我做错了什么。我有一个简单的计数器示例,我在调用v-on:click(调用我的方法)。名为counter的方法只是执行this.count ++。我验证了该方法有效,因为我可以调用console.log或在其中发出警报而没有任何问题。但是,当我尝试递增计数器时,它返回“v-on处理程序中的错误:”TypeError:无法读取未定义的属性“count”。我的源代码如下:

<template lang="pug">
    b-container(id="cont")
        b-button(v-on:click="counter") Click Me
        p {{count}}

</template>

<script>
    export default {
        data: () => {
            return {
                count: 0
            }        
        },
        methods: {
            counter: () => {
                this.count++
            }
        }
        
    }
</script>

<style>
#cont {
   margin-top: 10px
}
</style>
答案

我认为这与您使用箭头函数定义方法的事实有关,所以请尝试这样做:

<script>
export default {
    data(){
        return {
            count: 0
        }        
    },
    methods: {
        counter(){
            this.count++
        }
    }

}
</script>

因为箭头函数没有绑定到this,所以this将在箭头函数内部未定义。

另一答案

试试这个:

data() {
    return {
       count: 0
    }
}

例如,没有制作方法。

另一答案

如果您愿意使用arrowed版本,请使用如下:

data: () => {( counter: 0 )},

否则请参考前面的答案=)

以上是关于VueJS TypeError无法读取属性的主要内容,如果未能解决你的问题,请参考以下文章

TypeError:无法读取未定义 Vuejs 的属性“_isDestroyed”

VueJS 获取 TypeError:删除和添加传感器信息时无法读取未定义的属性

未捕获的TypeError:尝试在Vuejs中调用onchange()方法时,无法读取未定义的属性“apply”

VueJS TypeError无法读取属性

vuejs vue-router:TypeError:无法读取未定义的属性“推送”[重复]

自定义vue组件中的vuejs v-show调用TypeError:无法读取未定义的属性'_withTask'