I'm currently working on binding v-model dynamically to an object property within an array of objects. I am unsure about how to accomplish this task. The objective is to choose a user using the Select HTML tag and then display the list of that user's permissions (from the array of objects) in order to toggle between true/false using checkboxes. These changes should be saved to the corresponding object property inside the array of objects.
Template:
<div id="app">
<select v-model="selectedUser">
<option value="" disabled>Select User</option>
<option v-for="user in users" :value="user.name">{{ user.name }}</option>
</select>
<p>User Index: {{ getUserIndex }}</p>
<ul v-if="getUserIndex !== null">
<li v-for="(perm, id) in users[getUserIndex].perms">
<span>{{ perm.status }}</span>
<input type="checkbox" v-model="">
</li>
</ul>
</div>
script
new Vue({
el: "#app",
data: {
users: [
{ name: 'Alex', perms: [
{ status: 'active', perm: false },
{ status: 'invoice', perm: false }
] },
{ name: 'John', perms: [
{ status: 'active', perm: false },
{ status: 'invoice', perm: false }
] },
{ name: 'Helen', perms: [
{ status: 'active', perm: false },
{ status: 'invoice', perm: false }
] },
],
selectedUser: ''
},
computed: {
getUserIndex() {
let username = this.selectedUser;
let index = this.users.findIndex(el => el.name === username);
if (index == -1) {
return null
} else { return index }
}
},
})
I am providing the link to this JSFiddle as I find it challenging to explain in text.
https://jsfiddle.net/sgtmadcap/49bjwahs/141/
I am seeking guidance on dynamically binding v-model to each users[someindex].perms.perm property for modification. My ultimate goal is to update this array with all changes to a Firebase database. Thank you for any assistance provided! I understand that this might be basic, but I appreciate any help offered. P.S. Apologies for any English mistakes.