Jquery 方法在使用 vuejs 隐藏和显示后停止工作

Question

我有输入字段

<div class="section" v-if="active==1">
    <input type="text"  name="topic" id="topic" class="form-control" autocomplete="off" spellcheck="false">
</div>

而且我有提前输入

$('#topic').typeahead({
        hint: true,
        highlight: true,
        minLength: 0
    },
    {
        name: 'topics',
        source: substringMatcher(topics)
    },
);

当页面加载时，typeahead 工作正常，但是当我将 vuejs 的 active 设置为 0 然后返回 1（隐藏和显示 .section）然后 typeahead 停止工作

Answer 1

这是答案和原因

您正在使用 direct 将 typeAhead 处理程序绑定到输入元素仅将处理程序附加到已存在的元素的绑定。

这就是它在页面加载时首次运行的原因。

您正在使用 v-if 来销毁并重新创建元素。因为元素正在动态地重新创建打字头处理程序不再绑定到随后呈现的输入元素

如果你只想 show/hide 使用 v-show 的输入元素更好，因为它只是切换 css display 属性而且您不必担心处理程序的绑定，因为输入元素不再被删除

Jquery 方法在使用 vuejs 隐藏和显示后停止工作

Jquery method stops to works after hide and show with vuejs

javascript

jquery

vue.js

vuejs2

typeahead.js