Currently, I'm working on a Vue-Tac-Toe application just for fun but I've hit a bit of a roadblock.
Please take a look at the screenshot for better context. https://i.sstatic.net/AZtvH.jpg
The Issue: How can I pass the prop cellRow to the component Field.vue?
What I Need: Each Field should have a unique identifier, such as the top-left tile (the first one) being recognized as cellRow: 0 & cellId: 0. This information is necessary for checking tic-tac-toe wins (3 in a line etc.).
GameField.vue: We use a row and cell-based layout.
<template>
<div id="game-field">
<div class="container">
<template v-for="(rows, index) in 3">
<Row :cell-row="index" />
</template>
</div>
</div>
</template>
<script>
import Row from './Row.vue';
export default {
components: {
Row,
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.container {
width: 400px;
margin: 10% auto 0;
}
</style>
Row.Vue: Each row contains 3 Fields numbered from 0-2.
<template lang="html">
<div class="row">
<Field
v-for="(fieldId, index) in 3"
:key="fieldId"
:cell-id="index"
/>
</div>
</template>
<script>
import Field from './Field.vue';
export default {
components: {
Field,
},
props: {
cellRow: {
type: Number,
default: 0,
},
},
data() {
return {
};
},
};
</script>
<style lang="scss" scoped>
</style>
Field.vue:
<template lang="html">
<div class="cell">
<slot />
</div>
</template>
<script>
export default {
props: {
cellId: {
type: Number,
default: 0,
},
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
.cell {
margin: 1px 3px -3px -1px;
width: 100px;
height: 100px;
background-color: white;
display: inline-block;
cursor: pointer;
}
</style>