管理在 v-for 中创建的 v-select 中的 v-model 值

Question

我有一个由

v-for

创建的成员表，一些用户可以根据其角色管理其他成员。我实施了一些检查以防止某些角色干预，但完整的检查列表是在后端完成的。

管理是通过

v-select

完成的，我希望能够恢复

v-select

选择，因为用户无权执行此操作。

这是我一开始做的：

<template>
  <tr v-for="member in members" :key="member.username">
    <td>{{ member.username }}</td>
    <td>
      <v-select
        density="compact"
        hide-details="true"
        v-model="member.role"
        :items="dialog_roles"
        :item-props="itemProps"
        @update:modelValue="changeRole(member)"
      ></v-select>
    </td>
</template>

<script>
  export default {
    data: () => ({
      members: [
        {
          username: 'John',
          role: {
            role: 'owner',
            description: 'full access to the project, can delete it and can manage members'
          },
        },
        {
          username: 'Jane',
          role: {
            role: 'manager',
            description: 'full access to the project, and can manage members'
          },
        },
        {
          username: 'Joe',
          role: {
            role: 'collaborator',
            description: 'can view the project but not modify any content'
          },
        },
      ],
      dialog_roles: [
              {
                "role": "owner",
                "description": "full access to the project, can delete it and can manage members"
              },
              {
                "role": "manager",
                "description": "full access to the project, and can manage members"
              },
              {
                "role": "contributor",
                "description": "full access to the project, but cannot delete it"
              },
              {
                "role": "collaborator",
                "description": "can view the project but not modify any content"
              }
            ]
    }),
    methods: {
        itemProps(item) {
          return {
            title: item.role,
            subtitle: item.description,
          };
        },
        changeRole(member) {
          //make API call to change the role
          //if it was unauthorized, change back the role in the v-select
        },
    }
  }
</script>

为了能够在更新

v-select

时获取旧值和新值，我从

v-model="member.role"

移动到一个简单的

:value=member.role.role

，然后给出

@update:modelValue="changeRole(member, $event)"

，其中

member

存储初始值和

$event

更新了一个。

现在我已经知道了，如果 API 调用有效，我该如何应用此更改，如果无效，我该如何恢复它？

Answer 1

要在 API 调用有效时应用更改并在无效时恢复更改，您可以更新 Vue 组件中的changeRole 方法。

<template>
  <tr v-for="member in members" :key="member.username">
    <td>{{ member.username }}</td>
    <td>
      <v-select
        density="compact"
        hide-details="true"
        :value="member.role.role"  <!-- Use :value to bind the role.role value -->
        :items="dialog_roles"
        :item-props="itemProps"
        @update:modelValue="changeRole(member, $event)"
      ></v-select>
    </td>
  </tr>
</template>

<script>
export default {
  data: () => ({
    // Your data here
  }),
  methods: {
    // ...

    async changeRole(member, newRole) {
      const oldRole = member.role.role; // Store the old role
      member.role.role = newRole; // Update the local data immediately

      // Make an API call to change the role
      try {
        // Example: If your API call returns an error, you can handle it here
        // if (response.error) {
        //   member.role.role = oldRole; // Revert the role
        //   console.error('API call failed. Reverted role.');
        // }
      } catch (error) {
        // Handle API call errors here
        console.error('API call failed. Reverted role.');
        member.role.role = oldRole; // Revert the role
      }
    },
  },
};
</script>