vue.js - 选择选项中的 Vuejs 旧值

Question

如何在 Vuejs 中保留和显示选择元素的旧数据？

我的代码如下

 <select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>

  export default {

  data() {
    return {
      selected: "A",
      options: [
        { text: "One", value: "A" },
        { text: "Two", value: "B" },
        { text: "Three", value: "C" }
      ],
}}}

任何帮助将不胜感激

标签： vue.jsvuejs2

Answer 1

解决方案 1：使用keep alive

<keep-alive>
  <your-component>
</keep-alive>

这将使您的组件数据保持活跃，即使您切换组件也会显示出来。

解决方案2：使用store绑定数据

在你的里面state

const state = {
  selected: "A"
}

在突变

const mutations = {
  SET_SELECTED:(state,value)=>state.selected = value
}

现在在您的组件中添加一个computed功能（您可以selected从中删除data）

selected: {
  get: function () {
    return this.$store.state.selected;
  },
  set: function (value) {
    this.$store.commit('SET_SELECTED', value);
  }
}

解决方案使用localStorage

状态

const state = {
  selected: localStorage.getItem('selected') || null
}

突变

const mutations = {
  SET_SELECTED:(state,value)=>{
    state.selected = value;
    localStorage.setItem('selected',value);
  }
}