Vue2 日期选择器将数组输出分离到 v 模型

Question

我是vuejs和Expressjs的新手。我一直在使用带有范围属性的 vue2-datepicker 来获取用户为有入住和退房日期的预订系统选择的日期范围。vue2-datepicker 输出的是一个数组。

这是日期选择器：

<date-picker v-model="time1" valueType="format" range></date-picker> 

输出内容：

[ "2020-01-02"， "2020-01-11" ]

虽然我知道如何将其用于前端：

<h3>Available Rooms for the date: {{ this.time1[0] }} to {{ this.time1[1] }}</h3>

问题是我如何将数组输出分开，以将选择的第一个日期放入 CheckInDate，并将选择放入数据库的第二个日期的 CheckOutDate。

也许是这样的：

data(){
return{
time1:'',
ReserveDateForm:{
CheckInDate:this.time1[0],
CheckOutDate:this.time1[1]
},
}
},

一开始是这样尝试的，这有点破坏了应用程序

Answer 1

我试图用计算属性和观察器来解决这个问题，但由于time1的嵌套结构，这似乎并不总是有效。但是，您可以轻松地分离输出并相应地更新它们，如下所示

<date-picker v-model="time1" @input="updateTime" valueType="format" range></date-picker>

data() {
return{
time1:"",
ReserveDateForm:{
CheckInDate: "",
CheckOutDate: ""
},
},
methods: {
updateTime(time) {
this.ReserveDateForm = {
CheckInDate: time[0],
CheckInDate: time[1]
}
}
}