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

Question

我创建了一个表单，我试图了解如何在 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>

这是脚本代码：

<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>

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

Answer 1

您可以使用以下方法深入观察form（访问其嵌套字段）并循环遍历它的值：

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

 watch: {
    form: {
      handler: function(after, before) {
        Object.keys(after).forEach(key=>{
          localStorage[key]=after[key]
       })
      },
      deep: true
    }
   }