Twitter typeahead.js funktioniert nicht in Vue-Komponente

Question

Ich versuche twitter's typeahead.js in einer Vue-Komponente zu verwenden, aber obwohl ich es ordnungsgemäß außerhalb außerhalb einer Vue-Komponente getestet eingerichtet habe, wenn es innerhalb einer Komponente verwendet wird, nein Vorschläge erscheinen und keine Fehler werden auf die Konsole geschrieben. Es ist einfach so, als wäre es nicht da. Das ist mein typeahead Setup-Code:

  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>'; 
       } 
      } 
      }); 

ich es mit dieser Form Eingabe verwenden:

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

Wie bereits erwähnt, wenn ich mich bewege, dies zu einem div außerhalb Vue.js Kontrolle, und setzen Sie den Javascript in ein Dokument bereit Block, es funktioniert ganz gut, ein richtig formatiert Satz von Vorschlägen erscheint, sobald 3 Zeichen in das Feld eingegeben werden. Wenn ich jedoch das Javascript in die mounted() für die Komponente (oder alternativ in eine Uhr, habe ich beides ausprobiert), setzt keine Typahead-Funktionalität ein (dh es passiert nichts nach Eingabe von 3 Zeichen), obwohl der Bloodhound Vorabruf wird getätigt. Für das Leben von mir kann ich nicht sehen, was der Unterschied ist.

Irgendwelche Vorschläge, wohin man schaut, würden geschätzt.

Answer 1

SPÄTER: Ich habe es geschafft, es erscheinen zu lassen, indem ich den typahead Initialisierungscode in das aktualisierte Ereignis (anstelle von eingehängt oder Uhr) setze. Es muss ein Problem mit dem DOM sein, das nicht im richtigen Zustand ist. Ich habe einige Formatierungsprobleme, aber zumindest kann ich jetzt weitermachen.