I am new to vue.js.
I have a grid of divs (two nested vue.js components). I want to toggle the css class of a div if the user clicks on the grid.
My idea is to toggle a boolean isMarked on grid level and pass it as property to the child component. This does not work (it is not toggling) and I am afraid that I missed something fundamentally.
This is the template in App.vue:
<template>
<div class="container">
<app-grid :fields="fields" ></app-grid>
</div>
</template>
This is the code for the grid:
<template>
<div class="row">
<app-field v-for="(field, index) in fields" @click.native="markField(index)">{{ field }}</app-field>
</div>
</template>
<script>
import Field from './Field.vue';
export default {
props: ['fields'],
components: {
appField: Field
},
methods: {
markField(index) {
this.isMarked = !this.isMarked;
}
}
}
</script>
And finally the code for one field/div:
<template>
<div class="foo">
<div class="bar">
<div v-bind:class="{'marked': isMarked, 'notMarked': !isMarked}" >
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
isMarked: {
type: Boolean,
default: false
},
}
}
</script>
