javascript - 在 vue.js 上初始化 JavaScript

Question

我正在尝试在 vue 项目中使用 flatpickr 日历选项。基本上基于单选选项，我使用“v-if”条件渲染来渲染不同的 html 内容。

选择定时器的HTMl是这样的:

<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>

我渲染计时器的 HTML 是这样的，我还为 flatpickr 日历应用了类和 ID :

<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>

现在，为了使 flatpickr 正常工作，需要以下代码来初始化。

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

在 Vue 内部，我在初始化 flatpickr obj 时遇到一些问题。当用户单击第一个 radio 时，我添加了函数initCalendar。该函数仅执行上面所示的功能。它第一次工作，但当用户单击计时器 2 并再次单击计时器 1 时，我遇到了一些问题。我遇到的问题是，在功能开始之前我需要单击两次才能应用日历。第一次根本就不行。也许@click方法是错误的？有什么建议吗？

提前致谢!

Answer 1

当点击发生时，状态会改变，但元素不会立即渲染。将您的初始化代码放入 nextTick block 中。

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

如果这不起作用，请将其放入 setTimeout block 中并尝试各种延迟，直到其中一个起作用。

如果超时不起作用，您可能需要使用 v-show 而不是 v-if，并从 mounted() 调用 init。