使用 Bootstrap Tokenfield 时 V-model 不起作用

Question

我使用 Vue 和 Bootstrap Tokenfield 创建动态组件。但是v-model 在这种情况下不起作用。

假设，我在下面有一个数组：

索引变体选项
1个aa
2 sss

当我删除索引 1 时，索引 1 的结果应该是“sss”但仍然是“aaa”

<div class="card" v-for="(variant, index) in form.variants" :key="index">
<div class="card-body"> <span class="float-right" style="cursor: pointer" @click="deleteVariant(index)">
                                                            X
                                                        </span>
    <div class="row">
        <div class="col-md-4">
            <label for="weight">Variant Type {{ index + 1 }} </label>
            <div class="input-group">
                <input type="text" id="variant_type" class="form-control" v-model="
                                                                            variant.variant_type
                                                                        " @keyup="tokenField()" placeholder="Input variant type. E.g: Color" name="name" required autofocus /> </div>
        </div>
        <div class="col-md-8">
            <label for="weight">Variant Options {{ index + 1 }}</label>
            <div class="input-group">
                <input type="text" id="variant_options" autofocus="true" v-model="
                                                                            variant.variant_options
                                                                        " @mouseover="
                                                                            tokenField()
                                                                        " placeholder="Input variant options. E.g: Blue, Brown," class="
                                                                            form-control
                                                                            variant_options
                                                                        " /> </div>
data() {
    return {
        form: new Form({
            variants: [
                {
                    variant_type: '',
                    variant_options: '',
                },
            ],
        }),
    };
},
methods: {
    tokenField() {
        $('.variant_options').tokenfield({
            showAutocompleteOnFocus: true,
        });
    },
    addVariant() {
        if (this.form.variants.length <= 1) {
            this.form.variants.push({
                variant_type: '',
                variant_options: '',
            });
        } else {
            this.error = 'You can only add 2 type of varians';
            $('#errMsg').show();
        }
    },
    deleteVariant(index) {
        this.form.variants.splice(index, 1);
        $('#errMsg').hide();
    },
}, // methods:

Answer 1

当使用v-for 渲染列表时不要使用 index 变量来自v-for 作为:key，尤其是当循环内容包含任何<input> 元素和/或您正在添加/删除/排序项目...

查看文档 - Maintaining State

请注意，文档并未提及或不鼓励以任何方式将 index 变量用作 :key。但如果你仔细想想，使用index 确实与完全不使用:key 相同。因为:key 的作用是在循环中使用的每个项目与为其生成的DOM 之间建立关系（身份）。这是index 做不到的……

key 应该是稳定的（不随时间变化）并且在列表中的所有项目中都是唯一的。有时数据已经包含此类项目（例如，当数据来自服务器/数据库时）。如果没有具有上述功能的数据属性（如您的情况，variant_type 和 variant_options 都可以由用户编辑），只需生成您自己的人工密钥。有multiple ways to generate unique id in JS

使用“运行索引”的示例：

data() {
    return {
        nextId: 1,
        form: new Form({
            variants: [
                {
                    id: 0,
                    variant_type: '',
                    variant_options: '',
                },
            ],
        }),
    };
},
methods: {
    addVariant() {
        if (this.form.variants.length <= 1) {
            this.form.variants.push({
                id: this.nextId++,
                variant_type: '',
                variant_options: '',
            });
        } else {
            this.error = 'You can only add 2 type of varians';
            $('#errMsg').show();
        }
    },
}

...并在模板中使用:key="variant.id"