動態改變超鏈接中的文字與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>