vuejs3 - How do you re-render an element in Vue 3 after using localStorage?

Question

In Vue 3, elements based on computed properties don't seem to re-render after using localStorage.

To demonstrate this, we'll have a simple form with two checkboxes and text input field. When both checkboxes are checked, the input field should become read-only.

<div id="app">
  <form>
    <label>
      Checkbox A
      <input type="checkbox" v-model="checkboxA" />
    </label>

    <label>
      Checkbox B
      <input type="checkbox" v-model="checkboxB" />
    </label>

    <input type="text" value="abcd" :readonly="isTextBoxReadOnly" />
  </form>
</div>

The two checkboxes are bound to data properties and the readonly attribute is bound to a computed property.

const app = Vue.createApp({
    data() {
        return {
            checkboxA: false,
            checkboxB: false,
        }
    },
    computed: {
        isTextBoxReadOnly() {
            return ( this.checkboxA && this.checkboxB );
        },
    },
    mounted() {
        if (localStorage.checkboxA) {
            this.checkboxA = localStorage.checkboxA;
        }
        if (localStorage.checkboxB) {
            this.checkboxB = localStorage.checkboxB;
        }
    },
    watch: {
        checkboxA(newCheckboxA) {
            localStorage.checkboxA = newCheckboxA;
        },
        checkboxB(newCheckboxB) {
            localStorage.checkboxB = newCheckboxB;
        }
    }
})

Comment out the mounted() and watch: sections, and Vue 3 performs perfectly. With the localStorage enabled though, the text input doesn't seem to be rendered to match the computed property. To see this, run the code, check both boxes and uncheck them; the checkbox values are saved to localStorage. Then refresh the page and although the checkboxes are updated appropriately, the text input (based on a computed property) is not; even though both checkboxes are not checked, the text input is (incorrectly) read-only.

I'm thinking this behavior might be because localStorage is not reactive. How can the text input in this case be rendered properly?

question from:https://stackoverflow.com/questions/65894550/how-do-you-re-render-an-element-in-vue-3-after-using-localstorage

Answer 1

The issue here is that localStorage stores values as strings "true" and "false", you need to convert them back to boolean when retrieving them since as strings, both "true" and "false" are truthy:

mounted() {
    if (localStorage.checkboxA) {
        this.checkboxA = localStorage.checkboxA === 'true';
    }
    if (localStorage.checkboxB) {
        this.checkboxB = localStorage.checkboxB === 'true';
    }
}