问答详情
源自:2-3 Vue实例中的数据,事件和方法

为什么我的click方法,不能改变content内容,点击没有效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue 学习</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h1 v-on:click="handleClick">{{content}}</h1>
    </div>
    <script type="text/javascript">
    new Vue({
        el: "#root",
        data: {
            content: "Hola"
        },
        methods: {
            handleClick: () => {
                this.content = "Suremotoo";
            }
        }
    });
    </script>
</body>
</html>


提问者:花草木香丶忆花间相见 2019-01-04 22:04

个回答

  • 锅里的芒果
    2019-02-14 15:06:19

    注意,不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。

  • 花草木香丶忆花间相见
    2019-01-04 22:41:08

    Sorry,我找到问题了,将以下代码替换

    handleClick:  () => {
                    this.content = "Suremotoo";
       }
    handleClick: function() {
                    this.content = "Suremotoo";
                }

    看来不会es6的不要随便用。