q-toggle local storage toggle problem. how to solve it?
-
<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") },
-
@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.
-
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
-
@beets Thanks