Get Values of Nested Objects from localStorage Vue.js

Question

I have a vue.js application and into a component there's the data method that's returns a nested object like this:

obj: {
      color: {
        value: '',
      },
      shape: {
        value: '',
      },
      size: {
        value: '',
      },
}

Into the template a have inputs with v-models to fill these values:

<template>
<input
 v-model = "obj.color.value"
/>
<input
 v-model = "obj.shape.value"
/>
<input
 v-model = "obj.size.value"
/>

I can save this values into localStorage with the JSON.stringify method:

methods {

save() {
  localStorage.setItem("Itens", JSON.stringify(this.obj))
 }
}

and I can get this values from the localStorage with the JSON.parse:

created() {
 this.obj = JSON.parse(localStorage.getItem("Itens"))
}

However, when I do this into created the input fields into template aren't filled automatically with the values of obj saved in localStorage, the fields still blank. How can I get these values saved into the localStorage e fill the fields automatically with this stored values?

qimolin · Accepted Answer · 2022-03-31 23:08:08Z

0

Vue does not detect changes in a nested object. You'll have to create a watcher like so:

Vue JS Watching deep nested object

watch: {
    object: {
        handler(newVal, oldVal) {
            // do something with the object
        },
        deep: true,
  },

edited Mar 31, 2022 at 23:08

answered Mar 31, 2022 at 22:14

qimolin

8696 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Get Values of Nested Objects from localStorage Vue.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related