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

Question

Still learning Vue, but in short, after I do data = axiosAjaxResponse anything I type into a form field does not get updated in the v-model.

I have a manage page that passes my prop to the child page with a data structure like this.

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

Child page template

<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>

The logic

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

Everything works technically. The v-model (parent/child and vue plugin) all look correct after clicking update. Problem is, anything I type into any of the text boxes now, does not update the v-model. If I refresh the page, everything is fine.

I have tried using just this instead of _this. I've trued passing the data via EventBus back to the parent and updating there. I've tried putting the data into a new object and setting it. Nothing seems to make a difference and there are no errors.

tony19 · Accepted Answer · 2022-07-15 04:23:46Z

1

The array assignment is not able to be intercepted by Vue in order to catch it and notify watchers.

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

That will execute the array assignment and notify the watchers of that data.

You can also use Vue.set() which is the same thing.

More background on this general topic available here:

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

edited Jul 15, 2022 at 4:23

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Mar 18, 2020 at 20:46

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VirtualLife Over a year ago

That works, thanks. 1 question. Originally the data updated, but if I'm understanding correctly, it lost its reactivity and could no longer be tracked. Is there a way to see when that happens? I can imagine a few steps in on a bigger app and being a real challenge to debug.

David K. Hess Over a year ago

Unfortunately, I've never found a way to help prevent these kinds of coding mistakes. I suppose you could craft some debug-only code to poll all of your components' $data members and make sure they are all reactive and throw an error if they are not. For the most part, I've gotten to the point where muscle memory keeps me out of trouble on it.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related