如何重新加载页面仍然在选择时显示值？

【问题标题】：How to page reload still has value shown on select?如何重新加载页面仍然在选择时显示值？
【发布时间】：2021-07-08 07:54:25
【问题描述】：

我有一个状态选择：

<label>Status:</label>
<v-select
  :options="options"
  v-model="status"
  @input="changeValueStatus"
/>

data() {
 return {
  options: [
    { label: 'Success', value: 1 },
    { label: 'Fail', value: 2 },
    { label: 'Not start', value: 3 },
  ]
 }
}

methods: {
  changeValueStatus() {
     console(this.status)
  }
}

现在我想要。当我选择状态值并重新加载页面时，该值仍处于选择状态。给我一些想法。谢谢

【问题讨论】：

标签： vue.js

【解决方案1】：

您可以为此使用localstorage：

<label>Status:</label>
<v-select
  :options="options"
  v-model="status"
  @input="changeValueStatus"
/>

data() {
 return {
  status: JSON.parse(localStorage.getItem('status')),
  options: [
    { label: 'Success', value: 1 },
    { label: 'Fail', value: 2 },
    { label: 'Not start', value: 3 },
  ]
 }
},

methods: {
  changeValueStatus() {
    console.log(this.status)
    localStorage.setItem('status', JSON.stringify(this.status))
  }
}

如果您想改进解决方案，可以检查 localStorage.getItem('status') 是否为有效的 json 对象。

【讨论】：