Vue JS - 如何绑定按钮的值然后单击将值保存到本地存储答案

【问题标题】：Vue JS - How to bind a value for a button then on click save the value to local storageVue JS - 如何绑定按钮的值然后单击将值保存到本地存储
【发布时间】：2021-05-23 18:42:46
【问题描述】：

我有三个按钮，我想制作它以便我可以选择其中一个按钮，然后当我单击名为保存到本地存储的按钮时，所选按钮的值保存在本地存储中，我使用存储按钮文本和值的对象，如

{ btnText: "Green", value: "green-value" }

这是我的完整代码

<template>
  <div>
    <div>
      <div v-for="(i, index) in buttonsGroup" :key="index">
        <button
          :class="{
            EthnicityActive:
              i === EthnicityActive && 'EthnicityActive-' + index,
          }"
          v-on:click="EthnicityActive = i"
        >
          {{ i.btnText }}
        </button>
      </div>
    </div>

    <div class="save">
      <button @click="save">Save to local storage</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonsGroup: [
        { btnText: "Green", value: "green-value" },
        { btnText: "Blue", value: "blue-value" },
        { btnText: "Orange", value: "orange-value" },
      ],
      Save: null,
      EthnicityActive: "",
    };
  },
  methods: {
    save() {},
  },
};
</script>

我想这里一切都清楚了，我创建了一个对象，然后我使用了 v-for，我得到了按钮，还有一个 Save To Local Storage 按钮，以便在我选择其中一个后将其保存到本地存储三个按钮

你也可以看到给定的code in codesandbox

【问题讨论】：

标签： javascript vue.js vuejs2 local-storage

【解决方案1】：

现在是时候完成您的方法保存，像以下几行：

save() {
  window.localStorage.setItem('keyName', this.EthnicityActive.value);
}

【讨论】：

【解决方案2】：

到目前为止，您的代码很棒，只需将其添加到您的保存方法中即可：

save() {
  localStorage.setItem('selectedBtn',JSON.stringify(this.EthnicityActive))
  
},

它获取EthnicityActive（选择的btn）的值并将对象存储到本地存储中。

【讨论】：

【解决方案3】：

这里是将您选择的按钮值存储到本地存储的代码这是 2 个变化

将 EthnicityActive 设置为一个对象。 EthnicityActive: {} 由于您要发送按钮对象，因此应将 EthnicityActive 初始化为 empty object i.e {} 而不是 string i.e ''
点击保存即可存储localStorage.setItem(this.EthnicityActive.value)

这是修改后的代码

export default {
  data() {
    return {
      buttonsGroup: [
        { btnText: "Green", value: "green-value" },
        { btnText: "Blue", value: "blue-value" },
        { btnText: "Orange", value: "orange-value" },
      ],
      Save: null,
      EthnicityActive: {},
    };
  },
  methods: {
    save() {
      localStorage.setItem(this.EthnicityActive.value)
    },
  },
};

【讨论】：

【解决方案4】：

更新你的save()方法添加一个restore()方法，然后调用restore() 在创建的挂钩上恢复您保存的数据。

methods: {
    save() {
      localStorage.setItem(
        "EthnicityActive",
        JSON.stringify(this.EthnicityActive)
      );
    },
    restore() {
      this.EthnicityActive = JSON.parse(
        localStorage.getItem("EthnicityActive")
      );
    },
  },
created() {
    this.restore();
  },

https://codesandbox.io/s/icy-frost-osdql?file=/src/components/HelloWorld.vue

【讨论】：

亲爱的@MissJulie，你的代码抛出错误[Vue warn]: Error in render: "TypeError: Cannot read property 'value' of null"TypeError: Cannot read property 'value' of null