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

Question

所以我有一个对象循环，我想在它们上设置标志，以便我可以将它们的“状态”更改为“正在编辑”、“新创建”等，并根据状态显示适当的字段。这是我的代码:

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

重要的部分是底部的编辑按钮。我想将对象“isEditing”标志设置为 true，然后显示该行的输入字段。但是，它根本不起作用。它将更改应用程序的状态但不会更新代码，直到我关闭模式并再次打开它(这会强制刷新应用程序对象)。

我还计划将其更改为一个接受字符串“states”的属性，而不是更改多个标志，但是，现在我无法完成基本步骤。为什么在点击时将 application.isEditing 更改为 true 不会切换我看到的字段？

Answer 1

在 Vue 版本 3 到来之前，您需要小心地为对象动态添加属性。 Vue cannot detect当这种情况发生时，对新添加的属性的更改将不会 react 性地反射(reflect)在 DOM 中。

解决这个问题的主要方法是使用 Vue.set (或组件中的 this.$set)或在将对象添加到 Vue 之前添加属性。

看来 OP 使用 Vue.set 结合方法事件处理程序解决了这个问题。

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

在代码中:

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