Как правильно инициализировать данные формы в Vue

Question

поэтому у меня есть компонент, который отображает форму, и он также предварительно заполняет поля данными, полученными из запроса ajax.

Моя проблема в том, что я хочу не только иметь возможность редактировать поля, но и добавлять новые поля для одновременной отправки, поэтому из-за этого я пытаюсь инициализировать свои предварительно заполненные данные и новые данные в тот же объект, который будет отправлен с моим запросом ajax . С моей текущей настройкой данные формы не всегда заполняют поля до того, как форма будет обработана.

Это шаблон формы

<form @submit.prevent="editThisWorkflow" class="d-flex-column justify-content-center" >

 <div>
   <input type="text" v-model="workflowData.workflow">
    </div>
    <div >
    <div v-for="object in workflowData.statuses" :key="object.id">
    <input type="text" v-model="object.status">
    </div>
    <div v-for="(status, index) in workflowData.newStatuses" :key="index">
    <input type="text" placeholder="Add Status" v-model="status.value">
    <button type="button" @click="deleteField(index)">X</button>
    </div>
    <button type="button" @click="addField">
      New Status Field
    </button>
    </div>
    <div>
    <div>
    <button type="submit">Save</button>
    <router-link  :to="{ path: '/administrator/workflows'}" >Cancel</router-link>
  </div>
 </div>

</form>

Это сценарий

data() {
        return {
            workflowData: {
                id: this.$store.state.workflow.id,
                workflow: this.$store.state.workflow.workflow,
                statuses: this.$store.state.workflow.statuses,
                newStatuses: []
            },
            workflowLoaded: false
        }
    },
    computed: {
    ...mapGetters(['workflow']),
  },
  methods: {
    ...mapActions(['editWorkflow']),
    editThisWorkflow() {
        this.editWorkflow({
           id: this.workflowData.id,
           workflow: this.workflowData.workflow,
           statuses: this.workflowData.statuses,
           newStatuses: this.workflowData.newStatuses
        })
    },
    addField() {
        this.workflowData.newStatuses.push({ value: ''});
    },
    deleteField(index) {
        this.workflowData.newStatuses.splice(index, 1);
    }

И это метод хранения данных для отправки

editWorkflow(context, workflowData) {
      axios.patch('/workflowstatuses/' + workflowData.id, {
        workflow: workflowData.workflow,
        statuses: workflowData.statuses,
        newStatuses: workflowData.newStatuses
      })
      .then(response => {
          context.commit('editWorkflow', response.data)
      })
      .catch(error => {
          console.log(error.response.data)
      })           
    },

Моя проблема возникает здесь

 data() {
        return {
            workflowData: {
                id: this.$store.state.workflow.id,
                workflow: this.$store.state.workflow.workflow,
                statuses: this.$store.state.workflow.statuses,
                newStatuses: []
            },
            workflowLoaded: false
        }
    },

Есть ли лучший способ установить эту часть ??

workflowData: {
    id: this.$store.state.workflow.id,
    workflow: this.$store.state.workflow.workflow,
    statuses: this.$store.state.workflow.statuses,
    newStatuses: []
},

Answer 1

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

mounted() {
   this.workflowData.id = this.$store.state.workflow.id
   this.workflowData.workflow = this.$store.state.workflow.workflow
   this.workflowData.statuses = this.$store.state.workflow.statuses
},

data: () => ({
   workflowData: {
                id: '',
                workflow: '',
                statuses: '',
                newStatuses: []
            },
            workflowLoaded: false
        }
    },
})

Answer 2

То, как я решил эту проблему, оказалось проще, чем большинство решений, представленных здесь. Мне было трудно получить данные из this.$store.state из-за жизненного цикла Vuejs. Присвоение значений для v-mode было невозможно, потому что v-модель "будет игнорировать начальное значение, проверенные или выбранные атрибуты, найденные в любых элементах формы. Она всегда будет обрабатывать данные экземпляра Vue как источник истины. "

Решение

Для предварительного заполнения поля данными, полученными из запроса ajax, например, поле ввода типа email Я сделал следующим образом.

1-й. Я сохранил вывод своего запроса ajax в хранилище приложения (Cookies) - это может быть Local Storage или Session, в зависимости от того, что вам подходит.

2nd. Я заполнил свой хранилище Vuex ( единственный источник правды ) данными из моего хранилища приложений. Я делаю это каждый раз, когда перезагружаю страницу.

3-й. Вместо привязки данных к v-model в жизненном цикле Vuejs или использования атрибута значения ввода html (<input type="email" value="email@example.com">). Я предварительно заполнил ввод, заполнив атрибут placeholder html данными, поступающими из хранилища Vuex, следующим образом:

<input v-model="form.input.email" type="email" name="email" v-bind:placeholder="store.state.user.data.email">

Answer 3

Если вам нужно только один раз назначить значения магазина для вашей формы, вы можете использовать смонтированную функцию.

mounted: function() {
   this.id = this.$store.state.workflow.id
   this.workflow = this.$store.state.workflow.workflow
   this.statuses = this.$store.state.workflow.statuses
},
data() {
      return {
          workflowData: {
              id: '',
              workflow: '',
              statuses: '',
              newStatuses: []
          },
          workflowLoaded: false
      }
 },