Vue2 timepicker: значения по умолчанию из API

#node.js #express #vue.js #mongoose #timepicker

#node.js #экспресс #vue.js #мангуст #timepicker

Вопрос:

Я создаю простое приложение с помощью vue2 timepicker. Я знаю, как установить значения по умолчанию для времени начала и окончания в vue js.

  <li v-for="day in myDayArray" v-bind:key=day>
    <div>
    <label> {{day.Day }} : </label>
    <vue-timepicker class="timepicker" v-model="day.starttime" format="HH:mm" placeholder="Start Time" :minute-interval="30"></vue-timepicker>
     <span> To </span>
    <vue-timepicker class="timepicker" v-model="day.endtime" format="HH:mm" placeholder="End Time" :minute-interval="30"></vue-timepicker>  
    </div>
 </li>
  

Значения по умолчанию находятся здесь —

 data: function() {
    return {
      myDayArray: [
        {
          Day: "Monday",
          starttime: {
            HH: '15',
            mm: '30'
          },
          endtime: {
            HH: '21',
            mm: '00'
          }
        },
        {
          Day: "Tuesday",
          starttime: {
            HH: '15',
            mm: '30'
          },
          endtime: {
            HH: '21',
            mm: '00'
          }
        },
        {
          Day: "Wednesday",
          starttime: {
            HH: '15',
            mm: '30'
          },
          endtime: {
            HH: '21',
            mm: '00'
          }
        },
        {
          Day: "Thursday",
          starttime: {
            HH: '15',
            mm: '30'
          },
          endtime: {
            HH: '21',
            mm: '00'
          }
        },
        {
          Day: "Friday",
          starttime: {
            HH: '15',
            mm: '30'
          },
          endtime: {
            HH: '21',
            mm: '00'
          }
        },
        {
          Day: "Saturday",
          starttime: {
            HH: '15',
            mm: '30'
          },
          endtime: {
            HH: '21',
            mm: '00'
          }
        },
        {
          Day: "Sunday",
          starttime: {
            HH: '15',
            mm: '30'
          },
          endtime: {
            HH: '21',
            mm: '00'
          }
        }]
  

Если пользователь изменяет время начала и окончания, я сохраняю его в базе данных для пользователя. В следующий раз, как мне отобразить эти значения во времени начала и окончания вместо значений по умолчанию, установленных изначально? Другими словами, как мне установить значения по умолчанию в vue2 timepicker из внутренней базы данных?

Заранее спасибо за вашу помощь..

Комментарии:

1. добавьте одно вычисляемое свойство, а затем использует внутренние данные для перезаписи элементов this.myDayArray . наконец v-for , это вычисленное свойство.

2. В вашем компоненте created извлеките сохраненные значения и перезапишите myDayArray . Что вы пробовали?