vuejs2 - How to connect a select that has already a data binding with another variable in Vue

Question

I am doing a web app with Vue.js 2 and Laravel.

I would like to connect two selects but I don't know how to do that because the select to connect had already a data binding.

This is the component code:

    <template>
        <form method="POST">
            <div class="form-group">
                <h5>Edit an employee</h5>
            </div>
            <label for="permission">Users:</label>
                <select required v-model="user.information" class="form-control" id="user.informations">
                    <option v-for="user in users" :value="{ id: user.id, name: user.name, surname: user.surname, email: user.email, password: user.password }" :key="user.id">
                        {{ user.fullname }}
                    </option>
                </select>
            <div class="form-group">
                <label for="name">Name:</label>
                <input required :readonly="user.information.id === undefined" v-model="user.information.name" type="text" class="form-control" id="name">
            </div>
            <div class="form-group">
                <label for="surname">Surname:</label>
                <input required :readonly="user.information.id === undefined" v-model="user.information.surname" type="text" class="form-control" id="surname">
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input required type="email" :readonly="user.information.id === undefined" v-model="user.information.email" class="form-control" id="email">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input required type="password" :readonly="user.information.id === undefined" v-model="user.information.password" class="form-control" id="pwd">
            </div>
            <div class="form-group">
                <label for="permission">Permission:</label>
                <select required v-model="user.permissionId" :readonly="user.information.id === undefined" class="form-control" id="user-permissionId">
                    <option v-for="permission in permissions" :value="permission.id" :key="permission.id">
                        {{ permission.id }}
                    </option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </template>
    
    <script>
    
        export default {
            components: {
            },
            props: {
                permissions: {
                    type: Array,
                    required: true,
                    default: () => [],
                },
                users: {
                    type: Array,
                    required: true,
                    default: () => [],
                }
            },
            mounted() {
                console.log('Component mounted.');
            },
            computed:{
            },
            data: function() {
                return {
                    user: {
                        permissionId: "",
                        information: ""
                    }
                }
            },
            methods: {
            }
        }
    </script>

When I select an option in the select with id user.informations I should automatically select an option in the select with id user-permissionId (that has all the permissions id). For example, if I select a user in the first select I should visualize in the second select its permission id. In other words, to connect the two selects, I should add in the second select v-model="user.information.permission" but I cannot do that because the second select had already a data binding: v-model="user.permissionId".

Can help?

question from:https://stackoverflow.com/questions/65850962/how-to-connect-a-select-that-has-already-a-data-binding-with-another-variable-in

Answer 1

Waitting for answers