Vue.js jQuery.focusは機能しません。

Question

jQuery $（ "＃element"）。focus（）;関数は、最初にv-if divで機能しません。

こんにちは、私はVue jsで次の問題があります。私はv-ifで読み込み時に隠されているdivを持っています。 v-if条件が真の場合、divは表示されますが、そのdiv内の入力フィールドはフォーカスしないようにします。 $（ "＃element"）。focus（）;これは、divが表示された後初めて初めて発生します.focus（）works

ex。私は$（ "＃1 UPC"）を呼び出す> 0 this.boxes.lenghtボックスたら

<div class="row" v-show="boxes.length > 0"> 
    <div class="col-md-6"> 
     <input v-model="upc" type="text" class="form-control" name="upc" placeholder="Scan UPC here" id="upc" @keyup.13="scan"> 
    </div> 
</div> 

Htmlの

方法

に

addBox: function (event) 
{ 
    this.boxes.push({id: 1, name: 'Name', weight: 10 }); // Default is empty array. Comes true when i call this function and the div with #upc input becomes active and displayed 
    $("#upc").focus(); // When the first time boxes becomes true $("#upc").focus(); does not work. Once is displayed it works after. 
} 

を、この機能を持っている（）を集中します。入力フィールドをフォーカスします。

Answer 1

2つのことはしようとします

：（DOMが完全にあなたのビューモデルチェンジの結果が移入された後）

1. 使用ヴューのnextTickは、フォーカス・コールが次のDOM更新に実現するために

   Vue.nextTick(function() { $('#upc').focus(); }); 
   

2. お試しvue-focusフォーカス操作をモデルプロパティにバインドします（つまり、jQueryを取り除くことができます）。