Vue搭配Bootstrap Tokenfield开发动态组件时v-model不生效问题

数据老陈

2026-10-6

问题根因

v-for key绑定错误：使用数组索引作为key时，删除靠前的条目后，后续条目索引会整体前移，Vue的虚拟DOM diff算法会复用原有索引对应的DOM节点，不会触发重新渲染，导致视图和数据不匹配。
jQuery插件与Vue响应式冲突：Bootstrap Tokenfield初始化后会替换原有的input元素结构，你在mouseover、keyup事件中重复初始化所有输入框的Tokenfield实例，导致原有v-model绑定的输入框被覆盖，数据变更无法同步到插件生成的视图。
DOM ID重复：所有条目的input都使用相同的固定ID，会导致DOM选择和事件绑定出现混乱。

修复步骤

替换v-for的key为唯一值
给每个variant对象新增唯一ID字段，用ID作为v-for的key：

// 修改addVariant方法，新增时附加唯一ID
addVariant() {
    if (this.form.variants.length <= 1) {
        this.form.variants.push({
            id: Date.now(), // 时间戳作为唯一ID
            variant_type: '',
            variant_options: '',
        });
    } else {
        this.error = '最多只能添加2种规格';
        $('#errMsg').show();
    }
}

修改模板v-for绑定：

<div class="card" v-for="(variant, index) in form.variants" :key="variant.id">

重构Tokenfield初始化逻辑
移除input上绑定的@mouseover、@keyup触发的tokenField调用，统一在数组变更后批量初始化，同时绑定事件同步插件数据到Vue响应式对象：

methods: {
    initTokenField() {
        this.$nextTick(() => {
            // 先销毁已存在的实例，避免重复初始化冲突
            $('.variant_options').tokenfield('destroy');
            // 初始化所有规格选项输入框
            $('.variant_options').tokenfield({
                showAutocompleteOnFocus: true,
            });
            // 监听token变更事件，同步回Vue数据
            $('.variant_options').on('tokenfield:createdtoken tokenfield:removedtoken', (e) => {
                const currentCardIndex = $(e.target).closest('.card').index();
                this.form.variants[currentCardIndex].variant_options = $(e.target).val();
            });
        });
    },
    deleteVariant(index) {
        this.form.variants.splice(index, 1);
        $('#errMsg').hide();
        // 删除后重新初始化
        this.initTokenField();
    },
    addVariant() {
        if (this.form.variants.length <= 1) {
            this.form.variants.push({
                id: Date.now(),
                variant_type: '',
                variant_options: '',
            });
            // 新增后重新初始化
            this.initTokenField();
        } else {
            this.error = '最多只能添加2种规格';
            $('#errMsg').show();
        }
    }
},
mounted() {
    // 页面加载完成初始化第一个输入框
    this.initTokenField();
}

修复重复ID问题
将输入框的固定ID改为动态带索引的形式，避免DOM冲突：

<!-- 规格类型输入框 -->
<input type="text" :id="`variant_type_${index}`" class="form-control" v-model="variant.variant_type" placeholder="输入规格类型，例如：颜色" name="name" required autofocus />

<!-- 规格选项输入框 -->
<input type="text" :id="`variant_options_${index}`" autofocus="true" v-model="variant.variant_options" placeholder="输入规格选项，例如：蓝色、棕色" class="form-control variant_options" />

内容的提问来源于stack exchange，提问作者Cheer Up