One interesting feature of my website is a radio button field that appears on multiple pages. Although the radio buttons are the same on each page, the content below them varies. These radio buttons come with default values, but I have implemented a way to save the selected value so that even after refreshing or navigating to another page, the chosen option remains checked.
It's important to note that every page has a similar radio button section with different context underneath. My goal is to ensure continuity; if "choice 1" is selected on page 1, then it should automatically be selected on pages 2 and 3 as well. I've utilized local storage to store and retrieve the radio button value. However, I'm still figuring out how to fetch this stored value and display the corresponding checked button upon refresh or page switch.
#vuejs 2.6 vuetify 2.3
<template>
…
<v-radio-group v-model=radio row>
<v-radio label=“choice 1” value=“radio1”></radio>
<v-radio label=“choice 2” value=“default”></radio>
</v-radio-group>
<h1>Content page 1</h1>
…
</template>
<script>
export default {
components: {},
data() {
…
radio: “default”,
…
},
methods: {
saveRadio(value) {
localStorage.setItem("radio",value);
console.log(localStorage.getItem("radio"));
}
},
watch: {
radio(value) {
this.saveRadio(value);
}
}
}
</script>