Vue JS - Modifying object in for loop not updating live

Question

So I have a loop of objects and I want to set flags on them so that I can change their "state" to "being edited" "newly created" etc and show the proper fields depending on the state. Here is my code:

<tr v-for="application in editForm.applicationsSelected" :key="application.id">
    <!-- Name -->
    <td style="vertical-align: middle;" v-if="!application.fresh">
        {{ application.name }}
    </td>
    <td style="vertical-align: middle;" v-if="application.fresh">
        <select class="form-control" name="application_id" v-model="application.id">
            <option value="" selected disabled>Select One</option>
            <option v-for="application in applications" v-bind:value="application.id">{{ application.name }}</option>
        </select>
    </td>

    <!-- Appliction User ID -->
    <td style="vertical-align: middle;"  v-if="!application.isEditing && !application.fresh">
        {{ application.pivot.application_user_id }}
    </td>
    <td style="vertical-align: middle;"  v-if="application.isEditing || application.fresh">
        <input type="text" class="form-control" id="application_user_id" v-model="application.pivot.application_user_id" />
    </td>

    <!-- Edit User Application -->
    <td style="vertical-align: middle;" v-if="application.isEditing">
        <a class="action-link" @click="updateUserApplication(application, editForm.id)">
            Save
        </a>
    </td>
    <td style="vertical-align: middle;" v-if="application.fresh">
        <a class="action-link" @click="attachUserApplication(application, editForm.id)">
            Save
        </a>
    </td>
    <td style="vertical-align: middle;" v-if="!isEditing && !application.fresh">
        <a class="action-link" @click="application.isEditing = true">
            Edit
        </a>
    </td>
</tr>

The important part is the edit button on the bottom. I want to set the objects "isEditing" flag to true and then show the input fields for that row. However, its simply not working. It will change the state of the application but not update the code till i close the modal and open it back up again (which forces a refresh of the application objects).

Also I plan on changing this to one property that takes on string "states" instead of changing multiple flags, however, for now I can't get the basic step down. Why is it that changing application.isEditing to true on click isn't switching which fields i see?

Is isEditing part of the application object before you set it? vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats — Bert
– Bert, Commented Jan 23, 2018 at 16:45
Could you make a simple vue instance that reproduces your problem with minimal template, minimal css, sufficient data? — dvnguyen
– dvnguyen, Commented Jan 23, 2018 at 16:47
Can you provide the actual code? Like the js, along with a simple TLDR of what your input is, and what do you want as output along with where it errors? see — Mike Tung
– Mike Tung, Commented Jan 23, 2018 at 17:12
actually I believe Bert hit the nail on the head. Its not originally part of it. I've seen that link though and using Vue.set() didn't seem to help at all :\ — Bill Garrison
– Bill Garrison, Commented Jan 23, 2018 at 18:43
If the application objects are part of an AJAX response, you can iterate them after they are retrieved to add the property. — Bert
– Bert, Commented Jan 23, 2018 at 19:00

tony19 · Accepted Answer · 2022-07-15 22:11:11Z

3

Until version 3 of Vue arrives, you need to be careful about dynamically adding properties to objects. Vue cannot detect when this happens and, as such, changes to the newly added property will not be reactively reflected in the DOM.

The primary ways of working around this are using Vue.set (or this.$set in a component) or adding the property before the object is added to Vue.

It appears OP solved the problem using Vue.set combined with a method event handler.

<a class="action-link" @click="onEdit(application)">

And in the code:

methods: {
  onEdit(application){
    this.$set(application, 'isEditing', true)
  }  
}

edited Jul 15, 2022 at 22:11

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 23, 2018 at 21:10

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

Vue JS - Modifying object in for loop not updating live

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related