Vue JS 2でハイパーリンクのテキストを動的に変更する

Question

空のハイパーリンクを作成しようとしていますが、これをクリックするとメソッドが起動します。しかし、未知の理由により、メソッドが呼び出されますが、テキストはバインドされていません。あなたは正しくVueのインスタンスのdataプロパティにアクセスしていない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

： あなたはアドレスにコピーして試すことができます。

A 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>