Vue2-datepicker, разделяющий вывод массива на v-модели

Question

Я новичок в vuejs и Expressjs. Я использовал vue2-datepicker с опорой диапазона для получения диапазона дат, выбранных пользователем для системы бронирования, где есть CheckIn и CheckOut Date. И что выводит 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]
        }
    }
}