Vue安装的jquery代码在DOM重新渲染上不起作用答案

【问题标题】：Vue mounted jquery code not working on DOM re-renderVue安装的jquery代码在DOM重新渲染上不起作用
【发布时间】：2018-08-07 14:54:12
【问题描述】：

我正在尝试将 jqueryui 数据选择器与 vue 一起使用。日期选择器的输入位于模板 if-else 条件中。日期选择器最初工作得很好，但在使用模板来回翻转后，如果-否则它停止工作。似乎在 DOM 重新渲染后不再安装 jquery 代码。

<template v-if="...">
    <input name="startdate" id="startdate" v-model="date"  type="text">
</template>
<template v-else>
    <div>Some other display</div>
</template>

mounted: function() {

    $('#startdate').datepicker({
        onSelect:function(selectedDate, datePicker) {            
        this.date = selectedDate;
    }
    });

我将 jquery 代码放在“更新”中，现在它可以工作了，但是每次 DOM 更改时都会调用此代码。我想知道有没有更好的方法来实现这一点？

updated: function () {
  this.$nextTick(function () {
  ....
  ....

【问题讨论】：

如果您可以显示更多代码，尤其是更新块所在的位置。那我也许能帮上忙。
不是您问题的答案，但我会考虑使用基于 vue 的日期选择器。周围有足够多的人，同时使用 jQuery 和 Vue 会让人头疼不已。 Vue 几乎可以涵盖 jQuery 可以且更易于维护的所有场景。

标签： vue.js jquery-ui-datepicker

【解决方案1】：

您可以改用v-show。这只会切换元素的 display 值，不会从 DOM 中删除或添加到 DOM，因此任何附加的事件处理程序都不会受到影响。来自 Vue 文档：https://vuejs.org/v2/guide/conditional.html#v-show

也就是说，@Imre_G 关于寻找 Vue 日期选择器可能是正确的。

【讨论】：

谢谢我删除了我的模板 if-else 并替换为 divs + v-show 并且它有效！我将看一个仅 vue 的数据选择器。在我当前的环境中，我只能访问 vue、jquery 和 jqueryui 库。我会建议添加一个 vue datepicker 插件谢谢。

【解决方案2】：

试试这个：使用带有 mouted() 钩子的组件，只需将 v-once 指令添加到您的组件中。像这样：<input name="start date" ... v-once>

但是，正如 Imre_G 评论中提到的，考虑使用一些预制的 Vue 日期选择器组件。将 Vue 与 jQuery 混合使用会更好。

【讨论】：