Vue JS - How to bind a value for a button then on click save the value to local storage

Question

I have three buttons, I want to make it so that I can select one of these buttons, and then when I click on the button called Save to local storage, the value of the selected button is saved in local storage, I use the object that stores the button text and value like

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

Here is my complete code

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

I think everything is clear here, I created an object, then I used v-for, I got buttons, there is also a Save To Local Storage button, in order to save it to local storage after I selected one of these three buttons

You can also see the given code in codesandbox

newbie · Accepted Answer · 2021-05-23 10:36:52Z

2

Now it's time to complete your method save, like the following lines:

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

answered May 23, 2021 at 10:36

newbie

662 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Edouard Yonga · Accepted Answer · 2021-05-23 10:38:07Z

2

okay so far your code is great, just add this in your save methode:

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

it takes the value of EthnicityActive (the selected btn) and store the object to the localstorage.

answered May 23, 2021 at 10:38

Edouard Yonga

5175 silver badges12 bronze badges

Comments

Himanshu Saxena · Accepted Answer · 2021-05-23 10:39:13Z

Here is the code for storing your selected button value to local storage These are the 2 changes

set your EthnicityActive to an object. EthnicityActive: {} Since you are sending an object of button so it should be initialise the EthnicityActive to an empty object i.e {} rather than string i.e ''
On click of save you can store localStorage.setItem(this.EthnicityActive.value)

Here is the changed code

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)
    },
  },
};

MissJulie · Accepted Answer · 2021-05-23 10:42:46Z

1

update your save()method add a restore() method, then call restore() on created hook to restore you saved data.

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

answered May 23, 2021 at 10:42

MissJulie

3236 silver badges18 bronze badges

1 Comment

Synchro Over a year ago

Dear @MissJulie your code is throwing an error [Vue warn]: Error in render: "TypeError: Cannot read property 'value' of null" TypeError: Cannot read property 'value' of null

Collectives™ on Stack Overflow

Vue JS - How to bind a value for a button then on click save the value to local storage

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related