2017-06-19 12 views
1

Twitterのtypeahead.jsをVueコンポーネントで使用しようとしていますが、コンポーネント内で使用すると、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文字がフィールドに入力されるとすぐに適切にフォーマットされた一連の提案が表示されます。しかし、コンポーネントのmount()にJavascriptを入れた場合(または、時計の場合は両方を試してみました)、先読み機能は起動しません(3文字を入力しても何も起こりません)。Bloodhoundプリフェッチコールが行われます。私の人生のために、私は違いが何かを見ることができません。

どこから見たらいいと思いますか?

答えて

0

後で:私は、先読み初期化コードを(マウントされているか監視されている代わりに)更新されたイベントに入れて表示させることができました。 DOMが適切な状態にないことは、何らかの問題であったに違いない。私はいくつかの書式設定の問題を抱えていますが、少なくとも私は今のところ進めることができます。

関連する問題