javascript - 为什么 Vue js 方法在点击事件中不起作用？

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>