如何向数组提交表单并在vue中清除输入

Question

我在对话框中有一个vue表单。用户可以选择一个日期和多个开始时间和结束时间。到目前为止，我可以保存一个由一个日期和多次组成的对象。但当我想添加另一个对象时，它会采用新的日期，但会更改每个对象的时间值。

例如，如果我首先添加一个对象，其开始时间为2021年9月5日：15:00结束时间为16:00，然后添加另一个对象的日期为2021年6月6日开始时间：16:00结束时间：17:00。开始和结束都更改为所有对象的最新值，但我希望每个对象都是单独的。我试着提交了一个表单，但遗憾的是，我无法使其工作，因为它正在重新加载我不想要的页面，如果我使用的话。在提交时，防止我的错误，因为每个对象的时间都在变化。有人能看看我的代码并指出我的错误吗？

HTML:

<v-row>
<v-col cols="12" sm="12">
<v-menu
ref="menu3"
v-model="menu3"
:close-on-content-click="false"
:return-value.sync="dates"
transition="scale-transition"
offset-y
min-width="auto"
>
<template v-slot:activator="{ on, attrs }" >
<v-text-field
v-model="dates"
label="Picker in menu"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="dates"
no-title
scrollable
>
<v-spacer/>
<v-btn
text
color="primary"
@click="menu3 = false"
>
Cancel
</v-btn>
<v-btn
text
color="primary"
@click="$refs.menu3.save(dates) "
v-on:click=" menu3 = false"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
<v-btn v-on:click="addTimeFields()">Add Time</v-btn>
</v-col>
</v-row>
<v-row v-for="(find, index) in selectedTime" >
<v-col
cols="6"
sm="6">
<v-text-field
v-model="find.startTime"
label="Starttime"
type="time"
></v-text-field>
</v-col>
<v-col
cols="6"
sm="6">
<v-text-field
v-model="find.endTime"
label="Untiltime"
type="time"></v-text-field>
</v-col>
</v-row>
</form>

Javascript：

<script>
import MeetingsTableComponent from "@/components/MeetingsTableComponent";
import DatePickerComponent from "@/components/DatePickerComponent";
export default {
name: "NextMeetingCardComponent",
data: () => ({
selectedTime: [],
dates: new Date().toISOString().substr(0,10),
datesFinal: [],
dialog: false,
menu: false,
modal: false,
menu2: false,
menu3: false
}),
methods:{
addTimeFields(){
this.selectedTime.push({
startTime:"",
endTime: "",
})
},
saveDateAndTIme(e){
this.datesFinal.push({
date: this.dates,
times : [this.selectedTime]
}
)
this.$refs.form.submit()
},
clearArrays(){
while (this.selectedTime.length){
this.selectedTime.pop()
}
}
}
};
</script>

我尝试清除selectedTimes数组，该数组在推送后被推送到datesFinal，但随后所有值都被删除。

Answer 1

我认为saveDateAndTIme()中有一个错误：times包含this.selectedTime数组的嵌套数组，但这应该是未测试的(即，将times设置为this.selectedTime本身(。

将this.selectedTime推入datesFinal之后，可以通过将this.selectedTime设置为空数组来清除表单。

export default {
methods: {
saveDateAndTIme(e) {
this.datesFinal.push({
date: this.dates,
times: this.selectedTime, 👈
})
this.selectedTime = [] 👈
},
}
}

演示