Vuejs2 Vue.js2 v-用于单独的项目

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

        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>

cols=“12”
class=“联系人容器”
v-for=“联系人中的联系人”
：key=“contact.id”
>

假设

editMode

是组件的

数据的一部分。如果它是
道具
，那么这个解决方案可能有点难以实现

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

这样的话：
@click=“startEdit（contact.id）”
。在方法体中，
this.$set（this.editMode，contact.id，true）
。有关此$set的信息，请参见Vue文档中的

要检查行是否被禁用，请使用
：disabled=“editMode[contact.id]”
（无需进行三元运算符检查，因为它是一个布尔值）

这种方法可以同时编辑多行。虽然像
editedContacts
这样的名称在这种情况下可能更好。
现在可以使用了，我也会检查您的解决方案。（我是新手，stackoverflow说避免“谢谢”：D）我用以下方式解决：
async getContacts（）{const request=wait fetch（'https://localhost:6001/contact“”；var data=wait request.json（）；data.forEach（（element）=>{element.disabled=true；}）；this.contacts=data；console.log（this.contacts）；}，
在fetch方法中添加了一个属性，然后我可以绑定输入：
：disabled=“contact.disabled”
更新：嗯，我无法在注释中格式化代码：）