Vue2+Buefy项目单个select触发input事件导致全部列表select响应问题

问题原因 #

出现这个问题是两个语法使用错误共同导致的：

1. 事件绑定语法写错：@input才是监听input事件的正确写法，你写的:input是v-bind:input的缩写，属于属性绑定。Vue在模板渲染阶段就会直接执行绑定的表达式changeInvitationRole(index)，所以首次渲染就会把所有索引全部打印。
2. 你用数组索引作为v-for的key，当你修改某一项的role值时，数组响应式更新会触发整个列表重新渲染，所有b-select组件都会重新解析绑定的属性，再次执行一遍changeInvitationRole(index)，就会出现修改一个select、所有索引都被打印的现象。

解决方法 #

只需要修改两个点即可符合预期：

1. 把属性绑定改成事件绑定，两种写法都可以：

<!-- 错误写法 -->
:input="changeInvitationRole(index)"
<!-- 正确写法1：直接传参，Vue会自动封装为回调，仅事件触发时执行 -->
@input="changeInvitationRole(index)"
<!-- 正确写法2：手动用箭头函数包裹，效果一致 -->
@input="() => changeInvitationRole(index)"

2. 优先用列表项的唯一标识作为v-for的key，如果没有唯一id再降级用索引，减少不必要的列表重渲染：

<div v-for="(inv, index) in pendingInvitations" :key="inv.id || index" class="columns is-desktop">

修改后完整代码参考 #

<div v-for="(inv, index) in pendingInvitations" :key="inv.id || 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);
},

内容的提问来源于stack exchange，提问作者Čamo