I have set up a table of members using a v-for loop, and certain users have the ability to manage other members based on their role. I have implemented some checks to prevent unauthorized roles from intervening, but the full list of checks is carried out on the backend.
The management feature is facilitated through a v-select element, and I would like to be able to revert the selection made in the v-select if the user is not authorized to perform that action.
This was my initial approach:
<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"
:items="dialog_roles"
:item-props="itemProps"
@update:modelValue="changeRole(member, $event)"
></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, event) {
// make API call to change the role
// if unauthorized, revert back to the initial role
},
}
}
</script>
To have access to both the old and new values when updating the v-select, I replaced v-model="member.role" with a simple :value=member.role.role. This allows for
@update:modelValue="changeRole(member, $event)"member stores the initial value and $event holds the updated one.
Now that I have this setup, the question is how do I implement the change if the API call is successful, and how do I revert it if not?