[Vuejs]-Receiving an array then using a v-for to display results on multiple <select></select> A click on one option changes all other option values

by

1👍

It looks like you’re missing a :key on the outer v-for, and even in the inner v-for you’re missing the declaration of index.

I made some assumptions about the contents of arrayRoles and found the following template to work:

    <select v-for="(roles, index) in arrayRoles" :key="index">
        <option value="">Select role</option>
        <option v-for="(role, i) in roles" :key="i" :value="role.id">
            {{ role.title }}
        </option>
    </select>

A sample arrayRoles I used for testing:

        [
            [
                { id: 1, title: 'one' },
                { id: 2, title: 'two' },
                { id: 3, title: 'three' }
            ],
            [
                { id: 4, title: 'four' },
                { id: 5, title: 'five' },
                { id: 6, title: 'six' }
            ],
            [
                { id: 1, title: 'one' },
                { id: 2, title: 'two' },
                { id: 3, title: 'three' }
            ]
        ]
👤RNanoware

Leave a comment