Vue.js 2 v-用于单独的属性

Question

使用下面的代码，如果我按下“编辑”按钮，我会更改所有行的禁用状态，我该如何将其分开？我的意思是，一旦我只想编辑一行。

        cols="12"
        class="contact-container"
        v-for="contact in contacts"
        :key="contact.id"
      >
        <b-form inline>
          <b-input
            type="text"
            :value="contact.name"
            :disabled="editMode ? disabled : ''"
          />
          <b-input
            type="tel"
            :value="contact.phoneNumber"
            :disabled="editMode ? disabled : ''"
          />
          <b-input
            type="email"
            :value="contact.email"
            :disabled="editMode ? disabled : ''"
          />
          <b-input
            type="text"
            :value="contact.title"
            :disabled="editMode ? disabled : ''"
          />
          <b-button-group>
            <button type="button" size="lg" class="btn">
              <b-icon-x-circle-fill variant="danger"></b-icon-x-circle-fill>
            </button>
            <button type="button" size="lg" class="btn" @click="startEdit">
              <b-icon-pencil-fill variant="primary"></b-icon-pencil-fill>
            </button>
          </b-button-group>

Answer 1

假设 editMode 是组件 data 的一部分。如果是 prop，此解决方案实施起来可能有点棘手。

将 editMode 设置为组件数据中的空对象。对于方法 startEdit，它应该将正在编辑的联系人的 ID 作为参数。

所以像这样：@click="startEdit(contact.id)"。在方法体中，this.$set(this.editMode, contact.id, true)。有关 this.$set.

的信息，请参阅 Vue 文档中的 Reactivity in Depth

要检查一行是否被禁用，请使用 :disabled="editMode[contact.id]"（不需要三元运算符检查，因为它是布尔值）

这种方法可以同时编辑多行。尽管在这种情况下 editedContacts 这样的名称可能更好。

Vue.js 2 v-用于单独的属性

Vue.js2 v-for separate protperties

vuejs2

bootstrap-vue