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

试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: