Vue.js에서 중첩된 속성과 함께 v-model을 사용하는 방법

Vue.js에서 중첩된 속성과 함께 v-model을 사용하는 방법

양식을 생성했으며 Vue.js에서 중첩된 속성과 함께 v-model을 사용하는 방법을 이해하려고 합니다.

이것은 템플릿의 코드입니다.이렇게 네스트된 속성을 참조하려고 합니다.form.dobDate.dobDate 와 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()를 사용하여 페이지를 갱신하거나 폼을 송신할 때(현재로서는 검증되지 않음) 데이터를 로컬스토리지에 저장하기 위해 감시하고 있습니다.

여러분들도 보실 수 있고formdeep(네스트된 필드) 및 값을 사용하여 루프합니다.

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

언급URL : https://stackoverflow.com/questions/57691501/how-to-use-v-model-with-nested-properties-in-vue-js