2
Ich baue ein Tic Tac Too Spiel mit vue.js Framework. Ich habe eine Vue-Komponente mit dem Namen grid-item deklariert. Wenn dieses Element angeklickt wird, möchte ich die Methode handleClick aufrufen.Wie auf eine Methode von Vuejs Komponente zugreifen?
Wenn ich den folgenden Code ausführen, protokolliert es auf der Konsole, dass die handleClick Methode nicht definiert ist.
Wie Sie das Problem beheben und Zugriff auf diese Methode von der Komponente erhalten?
// vue components
Vue.component("grid-item", {
template: "#grid-item",
data: function() {
return {
sign: "X",
owner: ""
}
}
})
// vue instance
new Vue({
el: "#app",
data: {
matriceSize: 3,
},
methods: {
handleClick: function() {
alert("checked");
}
}
})* {
box-sizing: border-box;
}
#game-box {
width: 150px;
display: block;
margin: 0px auto;
padding: 0px;
background: green;
}
.grid-item {
display: inline-block;
width: 33.333%;
height: 50px;
background: yellow;
margin: 0px;
text-align: center;
line-height: 50px;
border: 1px solid
}<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div id="game-box">
<grid-item v-for="n in 9"></grid-item>
</div>
</div>
<template id="grid-item">
<div class="grid-item" @click="handleClick"></div>
</template>