Ajax Vue v型不'；在从rest调用更新表单输入后，不能从表单输入进行更新

仍在学习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>

从技术上讲，一切都是可行的。单击“更新”后，v-model（父/子和vue插件）看起来都是正确的。问题是，我现在在任何文本框中键入的任何内容都不会更新v模型。如果我刷新页面，一切正常

---

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

Vue无法拦截阵列分配以捕获它并通知观察者

使用

\u this.$set（\u this.growData[0].端口，\u this.rowIndex，data）

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

您还可以使用

Vue.set（）

，这与此相同

有关此一般主题的更多背景信息，请参见：

---

很有效，谢谢。1问题。最初数据更新了，但如果我理解正确，它失去了反应性，无法再被跟踪。有没有办法知道什么时候会发生？我可以想象在一个更大的应用程序上进行几步调试是一个真正的挑战。不幸的是，我从来没有找到一种方法来帮助防止这些类型的编码错误。我想您可以编写一些只调试的代码来轮询所有组件的$data成员，并确保它们都是被动的，如果不是，则抛出一个错误。在大多数情况下，我已经到了肌肉记忆让我免于麻烦的地步。

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();
}