从本地获取嵌套对象的值存储 Vue.js

Question

我有一个vue.js应用程序，在一个组件中有一个返回嵌套对象的数据方法，如下所示：

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

在模板中，具有v模型的输入来填充这些值：

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

我可以使用JSON.stringify方法将此值保存到localStorage：

methods {

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

我可以用JSON.parse从localStorage获取这些值：

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

但是，当我这样做到创建的模板中的输入字段不会自动填充保存在localStorage中的obj值时，字段仍然为空。如何将这些值保存到本地存储中，并自动用这些存储的值填充字段？

Answer 1

Vue不检测嵌套对象中的更改。您必须创建一个观察者，如下所示：

Vue JS监视深度嵌套对象

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