как отправить данные с событием click в 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

следующий фрагмент кода будет проходить индекс вашей функции 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 
} 
}