Vuetify dynamic form inputs with datepickers - vue.js

Question

I'm trying to make a dynamic form inside a dialog but having an issue with datepickers values. each datepicker doesn't set its value
<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>
script:
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);
}
},
}
when I assign the first start date it changes the second row's start date. And if I change the start date of the second row it it says
VDialog.ts?d213:245 Uncaught RangeError: Maximum call stack size
exceeded.

Answer 1

You have nested your v-dialog in your v-for hence generating as many v-dialog as rows. Ideally it would be preferable to declare it outside your looped element.