使用javascript在不同页面中存储和获取单选按钮值

#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>

export default {
  data() {
    return {
      radio: localStorage.getItem('radio') || 'default',
      content: '',
    };
  },
  watch: {
    radio(value) {
      localStorage.setItem('radio', value);
      console.log(localStorage.getItem('radio'));
    },
  },
  mounted() {
    this.setContent();
  },
  methods: {
    setContent() {
      // set the content based on the selected radio button value
      switch (this.radio) {
        case 'radio1':
          this.content = 'Content page 1';
          break;
        default:
          this.content = 'Default content';
          break;
      }
    },
  },
  updated() {
    this.setContent();
  },
};

Javascript相关问答推荐

如何访问react路由v6加载器函数中的查询参数/搜索参数

禁用从vue.js 2中的循环创建的表的最后td的按钮

JS生成具有给定数字和幻灯片计数的数组子集

React存档iframe点击行为

有什么(最佳)方法可以从模块中获取脚本模块的多姆元素吗？

使用JavaScript在ionic Web应用程序中更新.pane和.view的背景 colored颜色

深嵌套的ng-container元素仍然可以在Angular 布局组件中正确渲染内容吗？

react/redux中的formData在expressjs中返回未定义的req.params.id

拖放仅通过 Select 上传

按下同意按钮与 puppeteer 师

康威的生活游戏规则在我的Javascript版本中不起作用.''我做错了什么？

使用LocaleCompare()进行排序时，首先使用大写字母

Javascript json定制

S文本内容和值不必要的不同

如何将多维数组插入到另一个多维数组中？

如何在DYGRAPS中更改鼠标事件和键盘输入

无法避免UV：flat的插值：非法使用保留字"

将相关数据组合到两个不同的数组中

在渲染turbo流之后滚动到元素

使用Java脚本筛选数组中最接近值最小的所有项