Why is Vue js Method not working from click event?

Question

I'm learning how to use Vue and one of the methods in my practice code isn't working, any idea why?

When clicking 'Add name' an alert should pop up, but it doesn't.

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>

The button is not inside the Vue.

Bert
– Bert

2017-09-02 05:58:30 +00:00
Commented Sep 2, 2017 at 5:58 — Bert
– Bert, Commented Sep 2, 2017 at 5:58
yeah, this is from the LaraCast and I had the same problem

BlooSki
– BlooSki

2018-05-05 20:16:17 +00:00
Commented May 5, 2018 at 20:16 — BlooSki
– BlooSki, Commented May 5, 2018 at 20:16

Bert · Accepted Answer · 2017-09-02 06:04:51Z

2

Try this.

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>

edited Sep 2, 2017 at 6:04

answered Sep 2, 2017 at 6:00

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is Vue js Method not working from click event?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related