Twitter typeahead.js不工作在Vue组件

我想在Vue组件中使用Twitter的typeahead.js，但虽然我已经设置了正确的测试外部任何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一个文档就绪块，它工作得很好，只要在字段中输入3个字符，就会出现一组格式正确的建议。但是，如果我将JavaScript放入组件的挂载（）中（或者在手表中，我已经尝试了这两种方法），则没有任何类型提示功能（即在键入3个字符后没有任何反应），尽管血猎犬预取呼叫。对我而言，我看不出有什么不同。

任何建议，以在哪里看，将不胜感激。

来源

2017-06-19 John Moore

后来：我设法通过将更新的初始化代码放入更新的事件中（而不是挂载或监视）来让它出现。 DOM不能处于正确的状态一定是一些问题。我有一些格式问题，但至少现在我可以继续。

来源

2017-06-19 12:28:41

Twitter typeahead.js不工作在Vue组件

回答

相关问题