在 vue.js 上初始化 JavaScript答案

【问题标题】：Init JavaScript on vue.js在 vue.js 上初始化 JavaScript
【发布时间】：2019-07-15 14:19:08
【问题描述】：

我正在尝试在 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 时遇到了一些问题。当用户单击第一个收音机时，我添加了 initCalendar 功能。该功能只是执行上面显示的功能。它第一次工作，但是当用户单击 timer2 并再次单击 timer1 时我遇到了一些问题。我遇到的问题是我需要在功能开始应用日历之前单击2次。第一次根本不起作用。也许@click 方法错了？有什么建议吗？

提前致谢！

【问题讨论】：

你遇到了什么“问题”？
我遇到的问题是我需要在功能开始之前点击2次才能应用日历。第一次根本不起作用。可能是@click 方法错了？

标签： javascript vue.js

【解决方案1】：

当点击发生时，状态会改变，但元素不会立即呈现。将您的初始化代码放在 nextTick 块中。

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

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

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

【讨论】：

TimeOut 运行良好，非常感谢！