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

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>

有没有办法通过点击事件发送数据（例如被点击的元素的索引），以便由handleClick 方法处理，执行如下操作：

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

Answer 1

下面的 sn-p 会将索引传递给您的 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
}
}