0

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

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

索引variant_options
1 aaa
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:
4

1 回答 1

0

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

请参阅文档 -维护状态

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

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

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

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"在模板中使用

于 2021-08-28T10:39:57.570 回答