如何在Vue.js中将v-model与嵌套属性一起使用 [英] How to use v-model with nested properties in Vue.js

问题描述

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

I have created a form and I'm trying to understand how to use v-model with nested properties in Vue.js

这是我模板的代码，如您所见，我正在尝试引用嵌套属性，如下所示: form.dobDate ，但是如何引用属性( dobDate ， dobMonth 和 dobYear )在已安装和观看中?这样我输入的任何内容都会保留在页面刷新中?

This is the code for my template, as you can see I'm trying to reference the nested properties like so: form.dobDate, but how do I reference the properties (dobDate, dobMonth and dobYear) in mounted and watch? So that whatever I type remains there on page refresh?

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

如您所见，我有一个表单对象，其中有要绑定的嵌套属性，我还使用了 mount ()和 watch 以便在刷新页面或提交表单时将数据存储在本地存储中(目前不进行验证).

As you can see I have a form object, with nested properties inside it which I want to bind to, and I'm also using mounted() and watch to store the data in local storage for when the page refreshes or when submitting the form (no validation at the moment).

推荐答案

您可以深入观察form(访问其嵌套字段)并使用:

You could watch the form deeply (accessing its nested field ) and loop through it values using :

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

这篇关于如何在Vue.js中将v-model与嵌套属性一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！