Vue2 生成 select 每隔 select 触发一次事件

Question

我有一个带有 Buefy 扩展的 Vue2 项目。然后我有一个对象数组，它在模板中呈现，每个项目有一个 select 组件。一切正常，但如果我在 select 元素之一上触发 @input 事件，它会触发列表中所有 select 的输入事件。我不明白这有什么问题。

    <div v-for="(inv, index) in pendingInvitations" :key="index" class="columns is-desktop">
        <div class="column is-4">{{inv.email}}</div>
        <div class="column is-4">
            <b-field class="mb-5">
                <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);
    },

如果我更改角色并且列表中有三个项目，console.log() 会写入 0、1、2 作为所有项目的索引。为什么会发生在我身上？我希望日志中只有当前项目索引。

Answer 1

尝试用 change

替换 input

Vue2 生成 select 每隔 select 触发一次事件

Vue2 generated select triggers event for every other selects

select

input

vue.js

buefy