克隆表单通过vuejs包含从属字段

Question

我有一张表格，其中应该列出各种保健服务的价格。治疗方法已经分类。现在，我想首先从选择器中选择一个治疗组，然后在下一个选择器中为该类别选择治疗列表。当页面上只有一种表单时，我没有问题。但是我需要克隆此表格，用户才能同时记录一些治疗的价格。在这种情况下，所有第二个选择器都是根据类别的最后一个选择器设置的。同时必须匹配其类别的选择器。我很好地搜索了解决方案，但没有得到。我在vuejs中的代码如下。请指导我。预先谢谢你。

<template>
    <div>
        <div id="treatment_information">
           <div class="col-md-3">
                        <select id="category_name" class="form-control show-tick"
                                v-on:change="getTreatmentList($event)"
                                name="treatment_rates[]category_id" v-model="treatment_rate.category_id"
                        >
                            <option value="0"> -- select category --</option>
                            <option class="form-control main"
                                    v-for="item in vue_categories" :id="item.id+1000" :value="item.id"
                                    :name="item.name">
                                {{ item.name }}
                            </option>
                        </select>
                    </div>

                    <div class="col-md-3">
                        <select id="treatment_id" class="form-control show-tick"
                                name="treatment_rates[]treatment_id" v-model="treatment_rate.treatment_id"
                        >
                            <option value="0"> -- select treatment --</option>
                            <option class="form-control main"
                                    v-for="item in vue_treatments" :value="item.id">
                                {{ item.value }}
                            </option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                vue_temp: [],
                vue_categories: [],
                vue_treatments: [],
                vue_category: '',
                //for clone form
                treatment_rate: {
                    category_id: 0,
                    treatment_id: 0,
                    hospital_id: 0,
                    dollar: 'دلار',
                    rial: 'ریال'
                },
                treatment_rates: [],
            };
        },
        mounted() {
            console.log('Component mounted.');
            this.getList();
        },
        methods: {
            getList() {
                var self = this;
                axios.get('/vueDashboard/get/categories').then(function (response) {
                    self.vue_temp = response.data;
                    const len = self.vue_temp.length;
                    self.vue_temp.forEach(function (item) {
                        if (self.vue_right.length > 0) {
                            while (self.vue_right[self.vue_right.length - 1] < item['rgt']) {
                                self.vue_right.pop();
                                if (self.vue_right.length == 0)
                                    break;
                            }
                        }
                        self.vue_categories.push({
                            'id': item['id'],
                            'name': '---'.repeat(self.vue_right.length) + ' ' + item['name']
                        });
                        self.vue_right.push(item['rgt'])
                        var str = "---";
                    });
                }).catch(function (error) {
                    console.log(error);
                });

                axios.get('/vueDashboard/get/treatments?category=' + JSON.stringify(self.treatment_rates)).then(function (response) {
                    console.log(response.data);
                    self.vue_treatments = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            addForm(event) {
                var self = this;
                self.vue_increment_id[self.vue_counter++]=self.vue_counter;
                console.log(self.vue_increment_id);
                self.treatment_rates.push(Vue.util.extend({}, self.treatment_rate));
            },


        }
    }

</script>