I have this simple example written in Vue.js.

// vue instance
var vm = new Vue({
    el: "#app",
    data: {
        matrix: ["", "", "", "", "", "", "", "", ""],
    },
    methods: {
        handleClick: function() {
            console.log("event triggered");
        }
    }
})

* {
  box-sizing: border-box;
}

#game-box {
  width: 150px;
  display: block;
  margin: 0px auto;
  padding: 0px;
  background: green;
}

.grid-item {
  float: left;
  width: 33.333%;
  height: 50px;
  background: yellow;
  border: 1px solid green;
  margin: 0px;
  text-align: center;
}

<script src=".js"></script>
<div id="app">
  <div id="game-box">
    <div v-for="(sign, index) in matrix" class="grid-item" @click="handleClick">
      {{ sign }}
    </div>
  </div>
</div>

I have this simple example written in Vue.js.

// vue instance
var vm = new Vue({
    el: "#app",
    data: {
        matrix: ["", "", "", "", "", "", "", "", ""],
    },
    methods: {
        handleClick: function() {
            console.log("event triggered");
        }
    }
})

* {
  box-sizing: border-box;
}

#game-box {
  width: 150px;
  display: block;
  margin: 0px auto;
  padding: 0px;
  background: green;
}

.grid-item {
  float: left;
  width: 33.333%;
  height: 50px;
  background: yellow;
  border: 1px solid green;
  margin: 0px;
  text-align: center;
}

<script src="https://unpkg./vue/dist/vue.js"></script>
<div id="app">
  <div id="game-box">
    <div v-for="(sign, index) in matrix" class="grid-item" @click="handleClick">
      {{ sign }}
    </div>
  </div>
</div>

Is there any way to send data with click event (for example the index of the element that was clicked) in order to be handled by the handleClick method doing something like this:

handleClick: function(index) {
    console.log(index);
}

• javascript
• vue.js
• vuejs2

• 1 @click="handleClick(index) should work, have you tried this way? working example jsfiddle/azs06/4ps1b4nk – azs06 Commented Jan 26, 2017 at 22:07

2 Answers 2

The following snippet will pass index to your handleClick function.

handleClick(index)

// vue instance
var vm = new Vue({
    el: "#app",
    data: {
        matrix: ["", "", "", "", "", "", "", "", ""],
    },
    methods: {
        handleClick: function(i) {
            console.log("event triggered", i);
        }
    }
})

* {
  box-sizing: border-box;
}

#game-box {
  width: 150px;
  display: block;
  margin: 0px auto;
  padding: 0px;
  background: green;
}

.grid-item {
  float: left;
  width: 33.333%;
  height: 50px;
  background: yellow;
  border: 1px solid green;
  margin: 0px;
  text-align: center;
}

<script src="https://unpkg./vue/dist/vue.js"></script>
<div id="app">
  <div id="game-box">
    <div v-for="(sign, index) in matrix" class="grid-item" @click="handleClick(index)">
      {{ sign }}
    </div>
  </div>
</div>

// in view
@click='handleClick(data)'


// in logic
methods: {
handleClick(dataFromClick) => {
// do something with dataFromClick
}
}