具有可扩展项目的多个Vuetify组合框

Question

希望有人能帮我。

我想要一个可以执行以下操作的应用程序：用户可以添加表单的多个部分，包括文本输入和组合框。表单是为了获得用户对防火墙规则的输入，所以我需要检查名称，在2个组合框中，用户应该能够从预定义的项目中进行选择，但也应该能够用新的项目扩展预定义的项目。

通过绑定v模型＝"0"；型号"；在两个组合框上，我都得到了相同的所选项目(我不想要(，所以对于第二个组合框，我assining v-model＝"；模型2"；，这很有效，我可以将新条目添加到项目列表中，这很好。(this.items.push(this.model[this.model.length-1]((。this.items.push(this.model2[this.model2.length-1](

但我怎么能用一个"；v表示"；对于未知数量的表单，因为用户可以通过按下按钮来增加表单数量？

我可以做一些类似于v-model="模型(｛｛index｝｝(？

<div id="app">
<v-app id="inspire" v-for="(rule, index) in rules">
    <v-form
            ref="form"
            v-model="valid"
            lazy-validation
    >
        <v-text-field
                v-model="name"
                :counter="10"
                :rules="nameRules"
                label="Name"
                required
        ></v-text-field>
        <v-combobox
                v-model="model"
                :items="items"
                :search-input.sync="search"
                hide-selected
                hint="Maximum of 5 tags"
                label="Add some tags"
                multiple
                persistent-hint
                small-chips
        >
            <template v-slot:no-data>
                <v-list-item>
                    <v-list-item-content>
                        <v-list-item-title>
                            No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
                        </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </template>
        </v-combobox>
        <v-combobox
                v-model="model2"
                :items="items"
                :search-input.sync="search"
                hide-selected
                hint="Maximum of 5 tags"
                label="Add some tags"
                multiple
                persistent-hint
                small-chips
        >
            <template v-slot:no-data>
                <v-list-item>
                    <v-list-item-content>
                        <v-list-item-title>
                            No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
                        </v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </template>
        </v-combobox>
    </v-form>
</v-app>

<script>
new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        items: ['All', '10.0.0.0/8', '192.168.0.0/16'],
        model: null,
        model2: null,
        search: null,
        valid: true,
        name: '',
        nameRules: [
            v => !!v || 'Name is required',
            v => (v && v.length <= 10) || 'Name must be less than 10 characters',
        ],
        select: null,
        checkbox: false,
        rules: [1, 2, 3]
    }),
    watch: {
        model(val) {
            //if (val.length > 5) {
            //    this.$nextTick(() => this.model.pop())
            //}
            this.items.push(this.model[this.model.length-1])
        },
        model2(val) {
            //if (val.length > 5) {
            //    this.$nextTick(() => this.model.pop())
            //}
            this.items.push(this.model2[this.model2.length-1])
        },
    }
})

我去掉了按钮等，并用静态的3个条目创建了规则数组，因为这已经开始工作了。

提前感谢！

Answer 1

您可以将rules创建为包含每个规则的model1 model2的对象数组，并将它们绑定到combobox v-model，如下所示：

data: () => ({
        // all your other data
        rules: [
           { Id: 1, model1: null, model2: null },
           { Id: 1, model1: null, model2: null },
        ]
    }),

在您的模板中：

<v-combobox
     v-model="rule.model1"
     // all the rest
/>