[Vuejs]-How to assign v-on dinamically with v-for

by

0👍

You can make the listener function as a node in the object list.

Sample Implementation

const app = new Vue({
  el: '#app',
  data() {
    return {
      list: [{
        name: 'lg',
        age: 27,
        onClick: function() {
            console.log("First Item Clicked");
        }
      }, {
        name: 'camile',
        age: 27,
        onClick: function() {
            console.log("Second Item Clicked");
        }
      }]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="item.name">
        {{item.name}} - {{item.age}}
        <button @click="item.onClick()">
        Click Me
        </button>
      </li>
    </ul>
    <input type="text" v-model="list[0].name">
  </div>
</body>

Leave a comment