When selecting between true or false radio buttons, I want a block to appear when "One" is clicked and be hidden when "No" is clicked. Here is the code snippet I used:
<template>
<div>
<div>
<label
>One
<input type="radio" name="radio" value="true" v-model="websiteAccept" />
</label>
<label
>No
<input
type="radio"
name="radio"
value="false"
v-model="websiteAccept"
/>
</label>
<p>{{ websiteAccept }}</p>
</div>
<div v-if="websiteAccept" style="background: yellow">
<p>Hide / Show block</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
websiteAccept: null,
};
},
};
</script>
Although this method does not seem to work as expected, it could be due to the dynamic change of the websiteAccept property upon clicking the radio buttons.
You can view the code on codesandbox