My task here is to create a function that will show the "is the spa" section when the user clicks on the "Spa" checkbox. This particular project uses Laravel and Vue.js.
Below is the Bootstrap-Vue code I implemented for checkboxes:
<template>
<b-form-group label="Construction is a: ">
<b-form-checkbox-group
v-model="selected"
:options="options"
name="flavour-2a"
stacked
></b-form-checkbox-group>
</b-form-group>
</template>
<script>
selected: [], // Must be an array reference!
options: [
{ text: 'Pool', value: 'pool' },
{ text: 'Spa', value: 'spa' },
{ text: 'Pool & Spa', value: 'poolAndSpa'},
],
</script>
// **Function implementation starts here**,
<b-form-group label="Construction is a: ">
<b-form-radio-group
v-model="selected"
:options="options"
name="poolConstruction"
@change="radioChange($event)"
stacked
></b-form-radio-group>
</b-form-group>
radioChange: function(e) {
if(this.selected == "spa"||"poolAndSpa"){
document.getElementById("spaRadio").style.display = "block";
}else
{
document.getElementById("spaRadio").style.display = "none";
}