Как использовать v-модель с вложенными свойствами в Vue.js

Я создал форму и пытаюсь понять, как использовать v-модель с вложенными свойствами в Vue.js

Это код для моего шаблона, как вы можете видеть, я пытаюсь сослаться на вложенные свойства следующим образом: form.dobDate, но как мне сослаться на свойства (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>

Как видите, у меня есть объект формы с вложенными свойствами внутри, к которому я хочу привязаться, и я также использую смонтированные () и часы для хранения данные в локальном хранилище при обновлении страницы или при отправке формы (на данный момент нет проверки).


person ImranR    schedule 28.08.2019    source источник
comment
Ваш код кажется правильным, в чем проблема?   -  person Boussadjra Brahim    schedule 28.08.2019
comment
Я хочу узнать, как ссылаться на свойства в смонтированном методе и при просмотре, чтобы данные оставались на странице во время обновления страницы или при отправке.   -  person ImranR    schedule 28.08.2019
comment
Не совсем следую. Разве это не просто this.form.dobDate в mounted? Для watch вам понадобятся кавычки вокруг ключа свойства watch: { 'form.dobDate' () {...} }.   -  person skirtle    schedule 28.08.2019
comment
Я пробовал это, но это не работает, что я делаю не так ?: mount () {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; }, deep: true},   -  person ImranR    schedule 28.08.2019
comment
localStorage позволяет хранить строки, а не объекты. Вам нужно будет их соответствующим образом закодировать. Некоторая справочная информация: developer.mozilla.org/en-US/ docs / Web / API / Window / localStorage   -  person skirtle    schedule 28.08.2019


Ответы (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
    }
   }
person Boussadjra Brahim    schedule 28.08.2019
comment
извините, я не понял, как использовать это для решения, что-то вроде этого? смотреть: {форма: {обработчик (новое значение) {localStorage = newVal; }, deep: true}}, - person ImranR; 28.08.2019
comment
Да, что-то вроде localStorage.name = newval.name; - person Boussadjra Brahim; 28.08.2019
comment
Спасибо, в итоге я использовал следующее: handler: function (after, before) {Object.keys (after) .forEach (key = ›{localStorage [key] = after [key];}); }, deep: true - person ImranR; 29.08.2019
comment
пожалуйста, я отредактировал свой ответ, объяснив его лучше - person Boussadjra Brahim; 29.08.2019