q-toggle local storage toggle problem. how to solve it?

[avijit526]

Show Video

<q-toggle
              :false-value="false"
              :label="` ${redModel} `"
              :true-value="true"
              color="red"
              v-model="redModel"
              @input="test"
            />

data() {
    return {
         redModel: false
      }
},

methods: {
    test(val) {
      this.redModel = val
      console.log(this.redModel)
      localStorage.setItem("redModel", this.redModel);
    }
  },

  mounted() {
    this.redModel = localStorage.getItem("redModel")
  },

[beets]

@avijit526 Localstorage can only store strings. Try changing your mounted method to:

  mounted() {
    this.redModel = localStorage.getItem("redModel") === "true"
  },

Edit: Or, you could use:

              false-value="false"
              true-value="true"

Note that there isn’t a colon, so its true and false values are the literal strings “true” and “false”. But this isn’t the better solution IMO.

[dobbel]

@avijit526 @beets

The localstorage of a browser only supports strings as mentioned by @beets.

But you can use Quasar’s LocalStorage plugin that supports Objects.

https://quasar.dev/quasar-plugins/web-storage#LocalStorage-API

[avijit526]

@beets Thanks