使用 Vue.js 和 jQuery 自动完成

Question

我想同时使用 Vue.js 和 jQuery 来动态显示自动完成字段。

new Vue({
  el: "#el",
  data: {
    toggle: false
  }
});

var tags = [
  "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
  "Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python",
  "Ruby","Scala","Scheme"
];

$("#autocompleteSearch").autocomplete({
  source: tags
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="el">
  <input v-if="toggle" id="autocompleteSearch" type="search">
  <button @click="toggle=!toggle">Toggle</button>
</div>

如您所见，由于v-if输入的原因，它无法工作。如果我删除v-if它，它可以工作，但它不会动态显示。我应该怎么做？

Answer 1

这里有几件事需要注意。

$(selector) 在那个时间点查找现有的 DOM 元素

对于 jQuery 查找元素，执行查找时它必须存在于 DOM 中。关于 DOM Fragments 有一些警告，但这与这个特定问题无关。所以请记住，要让 jQuery 找到一些东西，它必须存在于 DOM 中。

许多 jQuery UI 方法初始化和转换元素

当您执行 jQuery UI 方法（如自动完成）时，jQuery 会更改并在页面上创建与您所定位的元素相关的标记。这些方法还可以将与元素相关的内部变量作为其初始化的一部分。

v-if 创建和销毁元素

的目的v-if是说，只有当某些条件为真时，元素才应存在。所以如果条件为假，它就不会存在于 DOM 中。此外，如果此条件可能会发生变化，则该元素可能会被多次创建和销毁。

因此，考虑到如何v-if工作，我们可以反思前两点。

• 如果 av-if使得在 jQuery 选择器运行时元素不存在，它将找不到要初始化的元素
• 如果 av-if销毁了一个元素，jQuery UI 小部件可能无法正常运行，因为它与它初始化的元素相关，而不是与为替换先前创建的元素而创建的未来元素相关。

考虑到这一点，在使用 Vue 和 jQuery 时，您必须牢记两者的需求，以及它们如何相互冲突，例如在这种情况下。指某东西的用途v-if当它控制的元素也被用作另一个库（例如 jQuery）中状态的一部分时，不一定是最好的指令。

为了解决这个问题，您可以选择使用另一个指令，例如v-showor v-hide。

v-show并且v-hide是同一枚硬币的两个面。它们确定元素是否应该对用户可见。这两个指令之间的明显差异，v-if是v-show和v-hide不从DOM删除元素。它们只是改变元素的显示状态。

因此，对于依赖于现有元素并将该元素用作某些状态管理的一部分的另一个库，这很棒！您可以控制用户何时看到某个元素，还可以避免与辅助库（例如 jQuery UI）发生冲突。

话虽如此，这并不意味着您不应该使用v-if. v-if对于在某些时间点不应该存在的元素仍然有用。所有这一切意味着您应该意识到您正在制造的情况，并考虑您的应用程序中可能依赖于这些元素的任何其他逻辑，以最大限度地减少创建错误的机会。

TL; 博士;

这是您的问题的解决方案：

new Vue({
  el: "#el",
  data: {
    toggle: false
  }
});

var tags = [
  "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion",
  "Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python",
  "Ruby","Scala","Scheme"
];

$("#autocompleteSearch").autocomplete({
  source: tags
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="el">
  <!-- Just replace v-if by v-show -->
  <input v-show="toggle" id="autocompleteSearch" type="search">
  <button @click="toggle=!toggle">Toggle</button>
</div>