I am currently working on a role permission system where I have defined a resource array containing items that users can access, as well as checks representing the permissions for each resource.
My goal is to dynamically assign a role with these resources and allow users to choose their desired permissions.
However, my current implementation only submits the last selected item from the checkbox instead of an array of all chosen permissions. What could I be missing here?
The template structure is as follows:
<template v-slot:activator="{ on }">
<v-btn
class="mx-2"
data-toggle="tooltip"
data-placement="left"
title="Edit Permissions"
fab
dark
small
color="#666"
v-on="on"
@click="getItem()"
>
<v-icon dark>mdi-access-point</v-icon>
</v-btn>
</template>
<v-form v-model="valid" @submit.prevent="onSubmit">
<v-container>
<v-row>
<v-col cols="12" sm="12" md="12" class="alternate-card">
<h4 class="text-muted text-center">
Role : {{ payload.role }}
</h4>
</v-col>
<blockquote class="col-md-12">
<h4 class=" text-center">Permissions</h4>
</blockquote>
<hr />
<v-col
cols="12"
sm="12"
md="12"
v-for="(perm, indexe) in result"
:key="indexe"
>
<h5 class="text-center text-muted">{{ indexe }}</h5>
<v-row class="alternate-card">
<v-col
cols="12"
sm="3"
md="3"
v-for="(item, index) in checks"
:key="index"
>
{{item}}
<span>
<v-checkbox
v-model="result[indexe]"
:label="item"
:value="item"
></v-checkbox>
</span>
</v-col>
</v-row>
</v-col>
</v-row>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialog = false"
>Close</v-btn
>
<v-btn type="submit" :disabled="!valid" color="blue darken-1" text
>Save</v-btn
>
</v-card-actions>
</v-container>
</v-form>
The script section includes the following logic:
export default {
props: ["form"],
data() {
return {
valid: false,
load: false,
payload: {},
result: {},
checks: {
create: "create",
edit: "edit",
delete: "delete",
show: "show",
},
};
},
methods: {
...mapActions(["editRole"]),
onSubmit() {
this.load = true;
console.log(this.result)
this.payload.permission = {}
this.payload.permission = this.result
if (this.editRole(this.payload)) {
setTimeout(() => (this.load = false), 1000);
setTimeout(() => (this.dialog = false), 1300);
}
},
getItem() {
// Code to fetch item details...
},
},
};
At the end of the process, the resulting object will look like this:
{ "package": [ "create", "edit", "delete", "show" ], "category": [ "create", "edit", "delete", "show" ], "product": [ "create", "edit", "delete", "show" ], "assets": [], "users": [], "readers": [] }
Note that for this specific problem, references to Vuex have been omitted for clarity.