ClickイベントからVue jsメソッドが機能しないのはなぜですか？

Question

私はVueの使い方を学んでいます。私の練習用コードの中の1つの方法はうまくいかず、なぜですか？

[名前を追加]をクリックするとアラートがポップアップ表示されますが、表示されません。

new Vue({ 
 
    el: '#array', 
 
    data: { 
 
    names: ['Jo', 'Joana', 'Joanna', 'Joan'] 
 
    }, 
 
    
 
methods: { 
 
    addName: function() { 
 
    alert('Adding name'); 
 
    } 
 
} 
 

 
});

<script src="https://unpkg.com/vue"></script> 
 

 
<div id="array"> 
 
    <ul> 
 
    <li v-for="name in names" v-text="name"> {{ names }} </li> 
 
    </ul> 
 
</div> 
 

 
<input type="text"> 
 
<button v-on:click="addName">Add name</button>

Answer 1

これを試してみてください。

new Vue({ 
 
    el: '#array', 
 
    data: { 
 
    names: ['Jo', 'Joana', 'Joanna', 'Joan'], 
 
    newName: "" 
 
    }, 
 
    methods: { 
 
    addName: function() { 
 
     this.names.push(this.newName); 
 
     this.newName = "" 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue"></script> 
 

 
<div id="array"> 
 
    <ul> 
 
    <li v-for="name in names"> {{ name }} </li> 
 
    </ul> 
 
    <input v-model="newName" type="text"> 
 
    <button v-on:click="addName">Add name</button> 
 
</div>