Vue.js 具有可扩展项的多个Vuetify组合框

希望有人能帮我

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

通过在两个组合框上绑定v-model=model，我得到了我不想要的相同的选定项，因此对于第二个组合框，我assining v-model=model2可以工作，并且我可以将新条目附加到items列表中，这很好。this.items.pushthis.model[this.model.length-1]分别。this.items.pushthis.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>

我删除了按钮等，并使规则阵列与静态3个条目，因为这是工作已经

提前谢谢

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

数据：=>{ //所有其他数据 规则：[ {Id:1，model1:null，model2:null}， {Id:1，model1:null，model2:null}， ] }, 在模板中：

---

你有没有像一个表单数组一样，用v-for循环？您能否添加一个示例，说明在实现v-for时它应该是什么样子的？在第二行代码中，我正在循环使用v-for。我从我稍大一点的项目中提取了这一点来关注这个问题。或者你想学习如何去做吗？然后我有一个很好的视频显示了这一点。所以当按下一个按钮时，我可以简单地用一个新的模型来推动规则数组，model2看起来很有希望，稍后会尝试。非常感谢。没错，成功了吗？是的，非常感谢！

<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])
        },
    }
})