Question

所以我有一个对象循环，我想在它们上面设置标志，以便我可以改变它们的状态＆＃34;到＆＃34;正在编辑＆＃34; ＆＃34;新创建＆＃34;等，并根据状态显示适当的字段。这是我的代码：

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

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

此外，我计划将此更改为一个属性字符串＆＃34;状态＆＃34;但是，现在我无法改变多个标志，而是无法完成基本步骤。为什么单击时将application.isEditing更改为true并不会切换我看到哪些字段？

Answer 1

在Vue版本3到来之前，您需要注意动态添加对象的属性。 Vue cannot detect当发生这种情况时，对新添加的属性的更改将不会在DOM中被反应性反映。

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

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

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

在代码中：

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

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

1 个答案: