Calender does not render on page refresh


#1

I have a small form designed to have two calendar fields, I am able to submit the form and the calendar works fine. but after submitting the form I am refreshing the page “self.$f7router.refreshPage();”. Once refreshed the startdate input got disabled and calendar neither renders on startdate nor enddate. Here is the code.

....
        <f7-list-item item-input id='start-date'>
          <f7-label>Start Date</f7-label>
          <div class="item-input-wrap">
            <input type="text" placeholder="Ex. 15-08-2019" required validate :value="myBannerData.startDate" class="calender"
              @input="myBannerData.startDate = $event.target.value" readonly="readonly" id="startDate"/>
          </div>
      </f7-list-item>
      <f7-list-item item-input id='end-date'>
          <f7-label>End Date</f7-label>
          <div class="item-input-wrap">
            <input type="text" placeholder="Ex. 08-01-2019" required validate id="endDate" :value="myBannerData.endDate"
                @input="myBannerData.endDate = $event.target.value"/>
          </div>
      </f7-list-item>
....

and in page init event I am creating calender components:

....
     onPageInit(e){
          console.log('in page Init')  
        const self = this;
        const app = self.$f7;
        const $ = self.$$;
        self.startDateCalender = app.calendar.create({
          inputEl: '#startDate',
          dateFormat: 'dd-mm-yyyy',
          closeOnSelect: true
        })
        self.endDateCalender = app.calendar.create({
          inputEl: '#endDate',
          dateFormat: 'dd-mm-yyyy',
          closeOnSelect: true
        })
      },
....

#2

Why do you do refreshPage in Vue? You shouldn’t! Just do manually in component what is required for component to look refreshed, e.g. reset some component data