VueJS TypeError无法读取属性

Posted 2021-03-30

好的，所以我在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 )},

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