Vue.js报错问题解决：[Vue warn]: Error in v-on handler: “ReferenceError: XXX is not defined“.

Vue.js中修复点击事件计数器错误

最新推荐文章于 2024-01-04 17:47:35 发布

原创最新推荐文章于 2024-01-04 17:47:35 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #经验分享

Vue 专栏收录该内容

8 篇文章

订阅专栏

文章展示了在Vue.js环境中，一个简单的按钮点击计数器功能的实现。初始代码由于忘记在`counter`方法中使用`this`关键字引用`count`属性，导致计数器无法正常工作。修正后的代码中，`this.count++`确保了对Vue实例数据的正确更新。

代码：

<div id="box">
    <button @click="counter">计算</button>
    <p>按钮被单击{{count}}次</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            count: 0
        },
        methods: {
            counter: function () {
                count++;
            }
        }
    })
</script>

报错信息：

原因：count 忘加 this 了。。。

<div id="box">
    <button @click="counter">计算</button>
    <p>按钮被单击{{count}}次</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            count: 0
        },
        methods: {
            counter: function () {
                this.count++;
            }
        }
    })
</script>

1、2