Question

我是JavaScript新手。最近我使用webpack + vuejs来创建SPA作为我的服务器。

我已经做了以下Hello.vue，

<template> 
    <div class="hello"> 
    <h1>{{ msg1 }}</h1> 
    <h1>{{ msg2 }}</h1> 
    <h1>{{ msg3 }}</h1> 
    <button @click='createDevice'>Create a new device 
    </button> 
    </div> 
</template> 

<script> 
var count = 1 
export default { 
    name: 'hello', 
    data:() => { 
    return { 
     msg1: 'I am Stephen', 
     msg2: 'Hello', 
     msg3: '0' 
    } 
    }, 
    methods: { 
    createDevice:() => { 
     count += 1 
     this.msg3 = count.toString() 
     console.log(this.msg3) 
    } 
    } 
} 
</script> 

但我发现，网页上的第三型信息没有更新，但我可以监督“this.msg3”在开发控制台增加。

任何人都可以帮忙吗？

非常感谢！

刘嘉敏

Answer 1

在https://jsfiddle.net尝试之后，我发现速记 “（）=>” 无法使用。 将“（）=>”更改回“function（）”后，文本绑定起作用。

<template> 
    <div class="hello"> 
    <h1>{{ msg1 }}</h1> 
    <h1>{{ msg2 }}</h1> 
    <h1>{{ msg3 }}</h1> 
    <button @click='createDevice'>Create a new device 
    </button> 
    </div> 
</template> 

<script> 
var count = 1 
export default { 
    name: 'hello', 
    data: function() { 
    return { 
     msg1: 'I am Stephen', 
     msg2: 'Hello', 
     msg3: '0' 
    } 
    }, 
    methods: { 
    createDevice: function() { 
     count += 1 
     this.msg3 = count.toString() 
     console.log(this.msg3) 
    } 
    } 
} 
</script> 

非常感谢。