为什么Vue js Method无法通过点击事件工作？

Question

我正在学习如何使用Vue和我的练习代码中的某个方法无法正常工作，为什么？

点击“添加名称”时会弹出一个提示，但不会。

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>