Init JavaScript on vue.js

Question

I'm trying to use flatpickr calendar option in a vue project. Essentially based on radio option I render different html content with the "v-if" conditional rendering.

The HTMl for choosing the timer is like that:

<div>
    <label>
       <input type="radio" name="timerType"
              @click="initCalendar"
              checked=""
              v-model="timer_type" 
              value="timer1"> TIMER 1 
     </label>
</div>
<div>
     <label class="form-check-label">
        <input type="radio"  name="timerType"
              v-model="timer_type"
              value="timer2">TIMER 2
     </label>
</div>

and the HTML where I render the timer is like that, I also apply the class and an ID for flatpickr calendar :

<div v-if="timer_type === 'timer1'">
    <input class="flatpickr flatpickr-input active" type="text" 
           placeholder="Select Date.."
           v-model="end_date"
           id="datetime" readonly="readonly">
</div>
<div v-else>
   <!--Other stuff-->
</div>

Now, for working properly flatpickr need the following code to init.

flatpickr("#datetime", {
     minDate: "today",
     enableTime: true,
     dateFormat: "F j, Y H:i",
});

Inside Vue I have some problem init the flatpickr obj. I have added the function initCalendar when the user click on the first radio. The function simply do the function showed above. It work the first time but I have some problem when an user click on the timer2 and again on the timer1. The problem I encounter is that I need to click 2 times before the function start to apply the calendar. The first time doesn't work at all. Maybe is the @click method wrong? Some suggestion?

Thanks in Advance!

The problem I encounter is that I need to click 2 times before the function start to apply the calendar. The first time doesn't work at all. Maybe is the @click method wrong? — Fabrizio Anichini
– Fabrizio Anichini, Commented Jul 15, 2019 at 17:35

Steven Spungin · Accepted Answer · 2019-07-16 07:20:16Z

1

When the click occurs, the state is changed but element does not render immediately. Put your init code in a nextTick block.

this.$nextTick(()=>{
 flatpickr("#datetime", {
     minDate: "today",
     enableTime: true,
     dateFormat: "F j, Y H:i",
 });
});

If that does not work, put it in a setTimeout block and try various delays until one works.

If the timeout does not work, you might need to use v-show instead of v-if, and call your init from mounted().

edited Jul 16, 2019 at 7:20

answered Jul 16, 2019 at 7:05

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fabrizio Anichini Over a year ago

The TimeOut work pretty well, thanks you very much!

Collectives™ on Stack Overflow

Init JavaScript on vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related