I have a Vue2 project with Buefy extension. Then I have an array of objects which is rendered in the template with one select component for each item. Everything works, but if I trigger @input event on one of the select elements it triggers input event for all selects in the list. I dont understand what is wrong with that.

    <div v-for="(inv, index) in pendingInvitations" :key="index" >
        <div >{{inv.email}}</div>
        <div >
            <b-field >
                <b-select v-if="invitationRoles" 
                          :input="changeInvitationRole(index)" 
                          v-model="pendingInvitations[index].role" 
                          :placeholder="role">
                    <option v-for="(value, key) in invitationRoles"
                            :key="key"
                            :value="value">
                        {{ value }}
                    </option>
                </b-select>
            </b-field>
        </div>
    </div>

    ...

    changeInvitationRole(index){
        console.log(index);
    },

If I change the role and there are three items in the list the console.log() writes 0, 1, 2 as indexes for all items. Why it happens to me? I expect only current itmes index in the log.

CodePudding user response：

Try replacing input with change