如何在 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

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


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

Answer 2

以下代码段会将索引传递给您的 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>

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

how to send data with click event in Vue.js

javascript

vue.js

vuejs2