Question

VueJS TypeError 无法读取属性

2019-04-14

1158

vue.js

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

Answer 1

我认为这与您使用箭头函数定义方法有关，因此请尝试以下操作：

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

}
</script>

因为箭头函数未绑定到 this ，所以 this 在箭头函数内部将是未定义的。

Answer 2

尝试这个：

data() {
    return {
       count: 0
    }
}

例如，不将其作为方法。

awagen

2019-04-14

Answer 3

如果您愿意使用带箭头的版本，请像这样使用：

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

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