Vue v-модель не обновляется из формы ввода после обновления из вызова покоя - PullRequest
Новая
       57

Vue v-модель не обновляется из формы ввода после обновления из вызова покоя

0 голосов
/ 18 марта 2020

Все еще учусь Vue, но вкратце, после того, как я выполню data = axiosAjaxResponse, все, что я ввожу в поле формы, не обновляется в v-модели.

У меня есть страница управления, которая передает мою подпорку дочерней странице с такой структурой данных. 

data() {
  return {
     Data: [{
        port: [
           {
              "portId": 11, ..., 
              schedule: [{ "scheduleId":1, ...

Шаблон дочерней страницы 

<b-row>
   all port data put into form fields
</b-row>

<b-row v-for="(schedule, index) in growData[0].port[rowIndex].schedules" :key="index">
   <b-col>
      <b-form-group label="Off Length" :label-for="'offLength' + index">
         <b-form-input :id="'offLength' + index" v-model="schedule.offLength" size="sm" trim></b-form-input>
      </b-form-group>
   </b-col>
</b-row>
<b-row>
   <b-col>
      <button v-on:click="addSchedule(rowIndex)">update</button>  
      <button v-on:click="updateData()">update</button>  
   </b-col>
</b-row>

Лог c

addSchedule(portId){  //add another schedule row
   this.Data[0].port[portId].schedules.push({startDateTime: '2020-03-12T00:00:00'})
   this.$forceUpdate();
},

async updateData() {
    var _this= this;

    var d = this.Data[0].port[_this.rowIndex]
    const { data } = await _this.$http.put(
        'https://localhost:44374/api/Schedule', d, 
        {headers: {'Content-Type': 'application/json'}}
    )
    _this.growData[0].port[_this.rowIndex] = data  //THIS KILLS ALL INPUTS
    this.$forceUpdate();
}

Все работает технически. V-модель (родительский / дочерний и vue плагин) все выглядит правильно после нажатия кнопки обновить. Проблема в том, что все, что я сейчас печатаю в любом из текстовых полей, не обновляет v-модель. Если я обновлю sh страницу, все будет хорошо.

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

1 Ответ

1 голос
/ 18 марта 2020

Назначение массива не может быть перехвачено Vue, чтобы перехватить его и уведомить наблюдателей.

Использовать _this.$set(_this.growData[0].port, _this.rowIndex, data)

Это выполнит назначение массива и уведомит наблюдатели этих данных.

Вы также можете использовать Vue.set(), что то же самое.

Дополнительные сведения об этой общей теме c доступны здесь:

https://vuejs.org/v2/guide/reactivity.html#Change -Detection-Предостережения

...