Vue JS - 在 for 循环中修改对象而不是实时更新

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?

Answer 1

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