动态改变超链接中的文字与Vue JS 2

Question

我想创建一个空的超链接，当点击时会触发一个方法。但是，由于未知原因，该方法被调用，但文本不具有约束力。 您可以复制并尝试在地址：https://jsfiddle.net/yyx990803/okv0rgrk/

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     message: 'Edit' 
 
    }, 
 
    methods: { 
 
    \t edit() { 
 
      message: 'Done' 
 
     } 
 
    } 
 
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script> 
 
<a href="javascript:void(0);" v-on:click="edit()" id="app"> 
 
    {{message}} 
 
</a>

Answer 1

您没有正确访问Vue的实例的数据属性。

甲Vue的实例的数据属性经由data属性设置（或更通常data法），但随后是通过this上的实例直接访问。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
     return { 
 
      message: 'Edit' 
 
     } 
 
    }, 
 
    methods: { 
 
    \t edit() { 
 
      this.message = 'Done'; 
 
     } 
 
    } 
 
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script> 
 
<a href="javascript:void(0);" v-on:click="edit()" id="app"> 
 
    {{message}} 
 
</a>