使用 Bootstrap Tokenfield 时 V 模型不起作用

Question

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

假设，我有一个数组如下：

索引variant_options
1 个 aaa
2 SS

当我删除索引 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 渲染列表时，不要将 v-for 中的 index 变量用作 :key，尤其是在循环时内容包含任何 <input> 元素 and/or 你是 adding/removing/sorting 项...

查看文档 - Maintaining State

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

key 应该是稳定的（不随时间变化）并且在列表中的所有项目中都是唯一的。有时数据已经包含这样的项目（例如当数据来自 server/database 时）。如果没有数据属性具有上述特征（如您的情况 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"

使用 Bootstrap Tokenfield 时 V 模型不起作用

V-model doesn't work when using Bootstrap Tokenfield

javascript

bootstrap-tokenfield

vue.js