如何在Vue.js中使用click事件发送数据

Question

我有一个用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> 

有没有什么方法可以通过click事件发送数据（例如，被单击元素的索引），以便由handleClick方法进行如下处理：

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

Answer 1

以下代码段会将索引传递给您的handleClick函数。

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> 

Answer 2

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


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