Vue 2.0: v-for loop on click

by Bruno Sabetta

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h4>Click on items:</h4>
  <ul>
    <li v-for="item in items" @click="item.onClick">
     {{item.text}}
    </li>
  </ul>
  <br>
  <br>
  <div>
   renderText: <b>{{renderText}}</b>
  </div>
</div>

CSS

body {
  padding: 20px
}

#app {
  background: #fff;
  padding: 20px;
}

li {
  margin: 8px 0;
}

JavaScript

new Vue({
  el: "#app",
  data() {
    return {
      renderText: '',
      items: [{
          text: 'Item One',
          onClick: () => {
            console.log('click 1', this)
            this.renderText = 'Item One Clicked'
          },
        },
        {
          text: 'Item Two',
          onClick: () => {
            console.log('click 2', this)
            this.renderText = 'Item Two Clicked'
          },
        },
      ]
    }
  }
})