Javascript 如何在Vue.js中使用具有嵌套属性的v-model

我已经创建了一个表单，我正在尝试理解如何在Vue.js中使用具有嵌套属性的v-model

这是我的模板的代码，正如您所看到的，我试图引用嵌套属性，如：form.dobDate，但是如何引用mounted和watch中的属性（dobDate、dobMonth和dobYear）？这样，我键入的任何内容都会保留在页面刷新中

<template>
  <div>
    <b-form novalidate>
      <b-form-select name="dobDate" id="dobDate" v-model="form.dobDate" :options="optionsDays"></b-form-select>

      <b-form-select name="dobMonth" id="dobMonth" v-model="form.dobMonth" :options="optionsMonths"></b-form-select>

      <b-form-input
        placeholder="Year of Birth"
        required
        autofocus
        class="form-control"
        name="year"
        id="year"
        min="0"
        max="2003"
        type="number"
        v-model="form.dobYear"
      ></b-form-input>

      <input type="text" v-model="name" />

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
    <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ form }}</pre>
    </b-card>
  </div>
</template>

提交
{{form}}

以下是脚本代码：

<script>
export default {
  data() {
    return {
      name: "",
      form: {
        dobDate: {
          selected: ""
        },
        dobMonth: {
          selected: ""
        },
        dobYear: "",
        name: ""
      },
      optionsMonths: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      show: true
    };
  },

  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    },
    deep: true
  },

  computed: {
    optionsDays() {
      return Array.from(Array(31).keys());
    }
  },

  methods: {
    onSubmit(evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
    },
    getDates() {
      return Array.from(Array(31).keys());
    }
  }
};
</script>

导出默认值{
数据（）{
返回{
姓名：“，
表格：{
日期：{
选定：“”
},
月份：{
选定：“”
},
年份：“，
姓名：“
},
选择月份：[
“一月”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“9月”，
“十月”，
“11月”，
“12月”
],
秀：真的
};
},
安装的（）{
if（localStorage.name）{
this.name=localStorage.name；
}
},
观察：{
名称（新名称）{
localStorage.name=newName；
},
深：是的
},
计算：{
选择天数（）{
返回Array.from（Array（31）.keys（））；
}
},
方法：{
onSubmit（evt）{
evt.preventDefault（）；
警报（JSON.stringify（this.form））；
},
getDates（）{
返回Array.from（Array（31）.keys（））；
}
}
};

---

如您所见，我有一个表单对象，其中包含嵌套的属性，我想绑定到该对象，并且我还使用挂载（）和监视将数据存储在本地存储中，以便在页面刷新或提交表单时使用（目前没有验证）

您可以深入查看

表单

（访问其嵌套字段），并使用以下方法循环查看其值：

  Object.keys(after).forEach(key=>{
          localStorage[key]=after[key]
       })

---

您的代码似乎正确，有什么问题吗？我想了解如何在装入的方法和观看时引用属性，以便在页面刷新或提交时数据仍保留在页面上。而不是真正遵循。它不就是

挂载的
中的
这个.form.dobDate
吗？对于
watch
您需要在属性键周围加引号，
watch:{'form.dobDate'（{…}}}
。我尝试了这个方法，但不起作用，我做错了什么？：mounted（）{if（localStorage.name）{this.name=localStorage.name；this.form.dobDate=localStorage.form.dobDate；}，watch:{name（newName）{localStorage.name=newName；}，“form.dobDate”（newDate）{localStorage.form.name=newDate；}，deep:true}，
localStorage
允许您存储字符串，而不是对象。您需要对它们进行适当的编码。一些背景阅读：对不起，我不明白如何使用这个解决方案，像这样的？注意：{form:{handler（newval）{localStorage=newval；}，deep:true}}，是的，类似于
localStorage.name=newval.name谢谢，我最后使用了以下命令：handler:function（after，before）{Object.keys（after.forEach（key=>{localStorage[key]=after[key]；}）；}，deep:trueyou's welcome我通过更好的解释编辑了我的答案
 watch: {
    form: {
      handler: function(after, before) {
        Object.keys(after).forEach(key=>{
          localStorage[key]=after[key]
       })
      },
      deep: true
    }
   }