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

Question

希望有人能帮助我。

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

通过在两个组合框上绑定 v-model="model"，我得到了相同的 selected 项（我不想要），所以对于第二个组合框，我使用了 v-model= “model2”有效，我可以将新条目附加到项目列表中，效果很好。 (this.items.push(this.model[this.model.length-1])) 分别。 this.items.push(this.model2[this.model2.length-1])

但是对于未知数量的表单，我如何使用“v-for”执行此操作，因为用户可以通过按下按钮来增加表单的数量？

我可以做类似 v-model="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

/>

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

Multiple Vuetify Comboboxes with extensible Items

combobox

vue.js

vuetify.js