[Vuejs]-Binding click to function in array in Vue

by

1👍

✅

Just make one function for calling you function on click.

To use dynamic function call it is suggested to have a helper function
that receives the function name and call the corresponding function.

 <li v-for="item in list" :key="item.title">
  <button :onclick="funcioncall(item.action)"> {{item.title}}</button>
</li>


  data () {
    return {
      test: '',
      submitting: false,
       list: [{
        title: "One",
        action: "itemClicked"
      },
      {
        title: "Two",
        action: "itemClicked2"
      },
      {
        title: "Three",
        action: "itemClicked3"
      }
    ]
    }
  },
methods: {
    itemClicked() {
      alert('item clicked')
    },
    itemClicked2() {
      alert('item clicked 2')
    },
    itemClicked3() {
      alert('item clicked 3')
    },
    funcioncall(name){
      this[name]();
    }
  }

-1👍

You can wrap the actions into a common action that redirects to a specific method depending on the index.

var app = new Vue({
      el: '#app',
      methods: {
        itemClicked(index) {
          alert('item '+ index +' clicked')
        }
      },
      data: {
        list: [{
            title: "One",
            action: 1
          },
          {
            title: "Two",
            action: 2
          },
          {
            title: "Three",
            action: 3
          }
        ]
      }
    })

To bind an action in vuejs, you should use the below syntax:

<button v-on:click="itemClicked({{item.action}})">{{item.title}}</button>
     OR
<button @click="itemClicked({{item.action}})">{{item.title}}</button>

Leave a comment