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

【问题标题】：How to use v-model with nested properties in Vue.js如何在 Vue.js 中使用带有嵌套属性的 v-model
【发布时间】：2020-01-01 15:04:23
【问题描述】：

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

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

<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在页面刷新或提交表单时将数据存储在本地存储中（目前没有验证）。

【问题讨论】：

您的代码似乎正确，有什么问题？
想了解在mounted方法中和观看时如何引用属性，以便页面刷新或提交时数据保留在页面上。
没有真正关注。不就是mounted中的this.form.dobDate吗？对于watch，您需要在属性键watch: { 'form.dobDate' () {...} } 周围加上引号。
我试过了，但这不起作用，我做错了什么？：mounted() { if (localStorage.name) { this.name = localStorage.name; this.form.dobDate = localStorage.form.dobDate; } }，观看：{ name(newName) { localStorage.name = newName; }, "form.dobDate"(newDate) { localStorage.form.name = newDate; }，深：真}，
localStorage 允许您存储字符串，而不是对象。您需要对它们进行适当的编码。一些背景阅读：developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

标签： javascript html vue.js vuejs2 bootstrap-vue

【解决方案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
    }
   }

【讨论】：

对不起，我不明白如何将其用于解决方案，像这样？观看：{形式：{处理程序（newval）{localStorage = newVal； }，深：真 } }，
是的，类似localStorage.name = newval.name;
谢谢，我最终使用了以下内容： handler: function(after, before) { Object.keys(after).forEach(key => { localStorage[key] = after[key]; } ); }，深：真
不客气，我通过更好地解释来编辑我的答案