Buefy Vue2 中b-select组件input事件不触发、v-model绑定无响应问题

核心错误点 #

• 事件绑定语法错误：使用了:input属性绑定语法，同时直接执行了函数而非传入函数引用，导致仅首次渲染时执行一次，后续选择变更不会触发。正确的事件绑定需用@input，且传参时要包裹为回调函数。
• 双向绑定语法错误：使用了:model单向绑定属性，并未使用v-model双向绑定指令，因此选择器的值变更无法同步回pendingInvitations数组的role属性，导致绑定值无响应。
• 列表key不规范：v-for使用index作为key，若后续数组有增删操作会导致组件复用异常，建议替换为数组项的唯一标识inv.id。
• 小语法问题：invitationRoles中user:"user缺失结尾双引号，需补全避免语法报错。

修正后的模板代码 #

<div v-for="(inv, index) in pendingInvitations" :key="inv.id" 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="$t('company.users.invitation.roles-placeholder')">
                <option v-for="(value, key) in invitationRoles"
                        :key="key"
                        :value="value">
                    {{ value }}
                </option>
            </b-select>
        </b-field>
    </div>
</div>

修正后的invitationRoles数据 #

{
    aaa:"aaa",
    bbb:"bbb",
    ccc:"ccc",
    user:"user"
}

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