how to send data with click event in Vue.js

Question

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.com/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);
}

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

Kyle Swanson · Accepted Answer · 2017-01-26 22:05:26Z

4

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.com/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>

edited Jan 26, 2017 at 22:05

answered Jan 26, 2017 at 22:01

Kyle Swanson

4554 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

m_callens Over a year ago

The use of an arrow / anonymous function is unnecessary. A simple handleClick(index) will do.

Kyle Swanson Over a year ago

Ah yep, I assumed it would call that function on load. Thanks!

Marek Urbanowicz · Accepted Answer · 2017-01-26 22:00:45Z

2

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


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

answered Jan 26, 2017 at 22:00

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

Collectives™ on Stack Overflow

how to send data with click event in Vue.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related