Vue 安装的 jquery 代码无法在 DOM 上重新渲染

Question

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

<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 代码放在 "updated" 中，现在它可以工作了，但是每次 DOM 发生变化时都会调用此代码。我想知道有没有更好的方法来完成这个？

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

Answer 1

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

但是，如 Imre_G 评论中所述，请考虑使用一些预制的 Vue 日期选择器组件。将 Vue 与 jQuery.

混合使用要好得多

Answer 2

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

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

Vue 安装的 jquery 代码无法在 DOM 上重新渲染

Vue mounted jquery code not working on DOM re-render

jquery-ui-datepicker

vue.js