Question

好的，所以我可能有两年多没有与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>

Answer 1

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

library(tidyverse)

slice_dataframe <- function(r, ord = 1) {
    tibble("order" = ord,
           "data_before" = list(slice(ex, row_number() <= (r - ord))),
           "data_after"  = list(slice(ex, row_number() >= (r + ord))))
}

map_df(1:nrow(ex), slice_dataframe)

由于箭头函数未绑定到<script> export default { data(){ return { count: 0 } }, methods: { counter(){ this.count++ } } } </script>，因此this在箭头函数内部未定义。

Answer 2

尝试一下：

data() {
    return {
       count: 0
    }
}

例如没有建立该方法。

Answer 3

如果您愿意使用带箭头的版本，请按以下方式使用：

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

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

VueJS TypeError无法读取的属性

3 个答案: