动态表单输入的形式化设计

Question

我试着在对话框中创建一个动态表单，但是存在数据隐藏值的问题。每个数据报警器都没有设置其值

<v-col
        cols="12"
        sm="12"
        md="12"
        v-if="typeOfContact === 'flexible'"
>

    <v-btn
            elevation="2"
            color="primary"
            @click="pushContract"
    >
        Add Contract
    </v-btn>

</v-col>

<v-row
        v-for="(contract, counter) in contracts"
        v-bind:key="counter"
>

    <v-col
            cols="12"
            sm="3"
            md="3"
            v-if="typeOfContact === 'flexible'"
    >

        <v-dialog
                ref="contractStartDateDialog"
                v-model="contractStartDateModal"
                :return-value.sync="contract.startDate"
                persistent
                width="290px"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                        v-model="contract.startDate"
                        label="Start Date"
                        prepend-icon="mdi-calendar"
                        readonly
                        v-bind="attrs"
                        v-on="on"
                >
                </v-text-field>
            </template>

            <v-date-picker
                    v-model="contract.startDate"
                    scrollable
            >
                <v-spacer></v-spacer>
                <v-btn
                        text
                        color="primary"
                        @click="contractStartDateModal = false"
                >
                    Cancel
                </v-btn>
                <v-btn
                        text
                        color="primary"
                        @click="$refs.contractStartDateDialog[counter].save(contract.startDate)"
                >
                    OK
                </v-btn>
            </v-date-picker>
        </v-dialog>
    </v-col>

    <v-col
            cols="12"
            sm="3"
            md="3"
            v-if="typeOfContact === 'flexible'"
    >
        <v-dialog
                ref="contractEndDateDialog"
                v-model="contractEndDateModal"
                :return-value.sync="contract.endDate"
                persistent
                width="290px"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-text-field
                        v-model="contract.endDate"
                        label="End Date"
                        prepend-icon="mdi-calendar"
                        readonly
                        v-bind="attrs"
                        v-on="on"
                >
                </v-text-field>
            </template>
            <v-date-picker
                    v-model="contract.endDate"
                    scrollable
            >
                <v-spacer></v-spacer>
                <v-btn
                        text
                        color="primary"
                        @click="contractEndDateModal = false"
                >
                    Cancel
                </v-btn>
                <v-btn
                        text
                        color="primary"
                        @click="$refs.contractEndDateDialog[counter].save(contract.endDate)"
                >
                    OK
                </v-btn>
            </v-date-picker>
        </v-dialog>
    </v-col>

    <v-col
            cols="12"
            sm="2"
            md="2"
            v-if="typeOfContact === 'flexible'"
    >
        <v-text-field
                v-model="contract.PIP"
                label="Periodically Increase"
                suffix="%"
                required
                :rules="[required('Periodically Increase'), minLength('Periodically Increase', 1), maxLength('Periodically Increase', 2), isNumuric('Periodically Increase')]"
        />

    </v-col>

    <v-col
            cols="12"
            sm="3"
            md="3"
            v-if="typeOfContact === 'flexible'"
    >
        <v-text-field
                v-model="contract.PIA"
                label="Periodically Increase Amount"
                suffix="K EGP"
                required
                :rules="[required('Periodically Increase Amount'), minLength('Periodically Increase Amount', 1), maxLength('Periodically Increase Amount', 15), isNumuric('Periodically Increase Amount')]"
        />
    </v-col>

    <v-col
            cols="12"
            sm="1"
            md="1"
            v-if="typeOfContact === 'flexible'"
    >
        <v-icon
                small
                class="mt-6"
                color="primary"
                @click="deleteContract(counter)"
        >
            mdi-trash-can-outline
        </v-icon>
    </v-col>

</v-row>

剧本：

export default {
        name: "data-management",
        data: () => ({
            contractStartDateModal: false,
            contractEndDateModal: false,
            contracts: [
                {
                    startDate: new Date().toISOString().substr(0, 10),
                    endDate: new Date().toISOString().substr(0, 10),
                    PIP: null,
                    PIA: null,
                },
                {
                    startDate: new Date().toISOString().substr(0, 10),
                    endDate: new Date().toISOString().substr(0, 10),
                    PIP: null,
                    PIA: null,
                },
            ],
        }),
        methods: {

            closeContracts () {
                this.contractsDialog = false;
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem);
                    this.editedIndex = -1;
                });
                this.closeContractsModal = true;
            },
            pushContract() {
                this.contracts.push({
                        startDate: new Date().toISOString().substr(0, 10),
                        endDate: new Date().toISOString().substr(0, 10),
                        PIP: null,
                        PIA: null,
                    });
            },
            deleteContract(counter){
                this.contracts.splice(counter,1);
            }
        },
    }

当我指定第一个开始日期时，它会更改第二行的开始日期。如果我更改第二行的开始日期，它会说

VDialog.ts?d213:245 Uncaught :最大调用堆栈大小超过.

Answer 1

您已经将v-dialog嵌套在v-for中，从而生成了与行一样多的v-dialog。理想情况下，最好在环元素之外声明它。