2
私はvue.jsフレームワークでTic Tac Tooのゲームを構築しています。私はgrid-itemと呼ばれるvueコンポーネントを宣言しました。このアイテムをクリックすると、メソッドが呼び出されます。vuejsコンポーネントからメソッドにアクセスするには？
コードを実行すると、メソッドが定義されていないコンソールにログが記録されます。
問題を修正し、コンポーネントからこのメソッドへのアクセス方法を教えてください。
// 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>