Проблема с динамической формой в vue2: [TypeError: Невозможно прочитать свойство '_withTask' из неопределенного]

Question

Мне нужно создать динамическую форму в vue2.Я хочу сохранить значения динамических полей в именованном объекте, чтобы я мог передать их при отправке.Следующий код работает нормально, за исключением того, что я получаю сообщение об ошибке в консоли, когда я изменяю входное значение в первый раз (хотя значение будет отображаться правильно):

[TypeError: Cannot read property '_withTask' of undefined]

Вот как я определяю реквизиты:

  props: {
    fields: {
      type: Object,
      default: {startWord: 'abc'}
    },
  },

И вот как я заполняю модель из поля ввода:

v-model="fields[field.id]"

Вот весь код:

<template>
  <div>
    <!-- Render dynamic form -->
    <div v-for="(field, key) in actionStore.currentAction.manifest.input.fields">

      <!-- Text -->
      <template v-if="field.type == 'string'">
        <label>
          <span>{{key}} {{field.label}}</span>
          <input type="text" v-bind:placeholder="field.placeholder" 
                 v-model="fields[field.id]"/>
        </label>
      </template>

    <!-- Footer -->
    <footer class="buttons">
      <button uxp-variant="cta" v-on:click="done">Done</button>
    </footer>
  </div>
</template>

<script>
const Vue = require("vue").default;
const {Bus, Notifications} = require('../../Bus.js');
module.exports = {
  props: {
    fields: {
      type: Object,
      default: {startWord: 'abc'}
    },
  },
  computed: {
    actionStore() {
      return this.$store.state.action;
    },
  },
  methods: {
    done() {
      console.log('fields', this.fields);
      Bus.$emit(Notifications.ACTION_INPUT_DONE, {input: this.fields});
    }
  },
}
</script>

Итак, опять всеработает просто отлично (показывает начальное значение на входе, передает новые значения в модель и т. д.).Но я получаю эту ошибку _withTask при первом вводе нового символа (буквально только при первом нажатии).После этой первоначальной ошибки она не появляется снова.

- Приложение -

Вот как выглядит манифест / поля:

manifest.input = {
  fields: [
    { id: 'startWord', type: 'string', label: 'Start word', placeholder: 'Enter start word here...' },
    { id: 'startWordDummy', type: 'string', label: 'Start word dummy', placeholder: 'Enter start word here...' },
    { id: 'wordCount', type: 'integer', label: 'Word count' },
    { id: 'clean', type: 'checkbox', label: 'Clean up before' },
  ]
}

-Обновление -

Я только что обнаружил, что если я изначально установил значения динамического поля со статическими значениями, я не получу ошибку для этих полей, установленных следующим образом:

  created() {
    this.fields.startWord = 'abc1';
  },

Но этоне вариант, так как это будет динамический список полей.Так какой же лучший способ справиться со сценариями, подобными этому?

Answer 1

Из документации: из-за ограничений современного JavaScript (и отказа от Object.observe) Vue не может обнаружить добавление или удаление свойства.Поскольку Vue выполняет процесс преобразования getter / setter во время инициализации экземпляра, в объекте данных должно присутствовать свойство, чтобы Vue мог преобразовать его и сделать его реактивным.

Как я понимаю, создание ключей вашегообъект по v-модели.Что бы я делал в HTML:

<input type="text" 
   :placeholder="field.placeholder" 
   @input="inputHandler(event, field.id)" />

Тогда в JS:

methods: {
    // ...
    inputHandler({ target }, field) {
        this.fields[field] = target.value;
    }
},