从休息调用更新后，Vue v-model 不会从表单输入更新

Question

仍在学习 Vue，但简而言之，在我执行 data = axiosAjaxResponse 之后，我在表单字段中输入的任何内容都不会在 v-model 中更新。

我有一个管理页面，它将我的道具传递给具有这样数据结构的子页面。

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>

逻辑

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-model（parent/child 和 vue 插件）看起来都是正确的。问题是，我现在在任何文本框中输入的任何内容都不会更新 v-model。如果我刷新页面，一切都很好。

我试过只使用这个而不是_this。我已经通过 EventBus 将数据传递回父级并在那里更新。我试过将数据放入一个新对象并进行设置。似乎没有什么不同，也没有错误。

Answer 1

Vue 无法拦截数组赋值以捕获它并通知观察者。

使用_this.$set(_this.growData[0].port, _this.rowIndex, data)

这将执行数组分配并通知观察者该数据。

你也可以使用Vue.set()，这是一样的。

此处提供有关此一般主题的更多背景信息：

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

从休息调用更新后，Vue v-model 不会从表单输入更新

Vue v-model doesn't update from form input after updating it from a rest call

ajax

vue.js

axios

v-model