Hey there! I am currently facing an issue with setting a value when one of the options is selected. The text input is supposed to appear only when an option is selected, and the value from the array user.roles should populate the input text field. However, I can't seem to figure out why it's not working as intended. Any assistance on this matter would be highly appreciated.
new Vue({
el: '#app',
data: {
user: {
email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8ccddcbccf8ccddcbcc96dbd7d5">[email protected]</a>',
roles: [{id: 1, name:'Client', value:'this is just a value'}]
},
roles: [
{
id: 1,
name: 'Client',
value:'',
},
{
id: 2,
name: 'Admin',
value:'',
},
{
id: 3,
name: 'Guest',
value:'',
}
]
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<label>Email</label>
<input type="text" v-model="user.email" />
</div>
<div v-for="(role,index) in roles" :key="role.id">
<label>{{role.name}}</label>
<input type="checkbox" v-model="user.roles" :value="role"/>
<p v-if="user.roles.filter(e => e.id === role.id).length > 0">
<input type="text" value="The value from user.roles should go here.... instead of the value of role.value">
</p>
</div>
<p>User's selected roles</p>
{{user.roles}}
</template>
</div>