according to which radio I want to do, the div will be opened and the other one will be closed. I couldn't figure it out. I'm new to vuejs and stackoverflow. Thanks in advance.
<div class="col-sm-3 d-flex border-light">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange($event)" value="1" checked>
<label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label>
</div>
<div class="col-sm-3 d-flex border-light">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange($event)" value="2">
<label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label>
</div>
<div>YELLOW</div>
<div>BLUE</div>
export default {
data() {
return {
show: true,
}
},
methods: {
onChange(event) {
var data = event.target.value;
}
}
}
In template you call method with value @change="onChange(false)"
You show divs if data show is true or false v-if="show"
In method you set data show depending on radio button clicked this.show = color
Something like following snippet:
new Vue({
el: '#app',
data() {
return {
show: true,
}
},
methods: {
onChange(color) {
this.show = color
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="col-sm-3 d-flex border-light">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange(true)" value="1" checked>
<label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label>
</div>
<div class="col-sm-3 d-flex border-light">
<input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange(false)" value="2">
<label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label>
</div>
<div v-if="show">YELLOW</div>
<div v-if="!show">BLUE</div>
</div>