vue.js - Twitter typeahead.js 在 Vue 组件中不起作用

Question

我正在尝试在 Vue 组件中使用 Twitter 的 typeahead.js，但尽管我已经在任何 Vue 组件之外正确设置它，但在组件内使用时，不会出现任何建议，也不会写入任何错误控制台。就好像它不存在一样。这是我的预输入设置代码:

         var codes = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('code'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: contextPath + "/product/codes"
        });
        $('.typeahead').typeahead({
            hint: true,
            highlight: true,
            minLength: 3
          },
          {
            name: 'codes',
            display: 'code',
            source: codes,
            templates: {
              suggestion: (data)=> {
                return '<div><strong>' + data.code + '</strong> - ' + data.name + '</div>';
              }
            }
          });

我将它与此表单输入一起使用:

<form>
<input id="item" ref="ttinput" autocomplete="off" placeholder="Enter code"     name="item" type="text" class="typeahead"/>
</form>

如前所述，如果我将其移至 Vue.js 控件之外的 div，并将 Javascript 放入文档就绪 block 中，它工作正常，只要在中输入 3 个字符，就会出现一组格式正确的建议 field 。但是，如果我将 Javascript 放在组件的 mounted() 中(或者在 watch 中，我都尝试过)，则不会启动预输入功能(即，输入 3 个字符后没有任何反应)，尽管 Bloodhound进行预取调用。对于我的生活，我看不出有什么区别。

如有任何关于查看位置的建议，我们将不胜感激。

Answer 1

稍后:我设法通过将预输入初始化代码放在更新的事件中(而不是安装或监视)来让它出现。一定是 DOM 未处于正确状态的问题。我有一些格式问题，但至少我现在可以继续了。