irrational irrational - 2 months ago 16
Javascript Question

When using vue.js 2.0, how do you pass an array index to a method inside of a v-on:click?

I am trying out vue 2.0 for the first time today. You can see my first attempt at using vue below. I am trying to pass the index of the array into a method. I have tried lots of different ways of doing this but none have been successful. What is the correct way to do this? Thanks!

<div id="app">
<div class="content_block" v-for="(entry, index) in entries" :key="entry.title">
<ul>
<li>title: {{entry.title}}</li>
<li>names: {{entry.names}}</li>
<li>index: {{index}}</li>
<button v-on:click="addName('{{index}}','susan')">Susan</button>
</ul>
</div>
</div>

<script>
var the_data = [{"title":"developer","names":["john","bob"]},{"title":"designer","names":[]}];

var vm = new Vue({
el:'#app',
data: {
entries: the_data
},
methods: {
addName: function(index, the_name){
console.log(index + " : " + the_name);
this.data.entries[index].names.push(the_name);
}
}
});
</script>

Answer

You should not use interpolation inside attribute values.

Please, try:

<button v-on:click="addName(index, 'susan')">Susan</button>

You can use the shorthand @ for v-on:

<button @click="addName(index, 'susan')">Susan</button>