Vue.js jQuery.focus не работает

Question

jQuery $ ("# element"). Focus(); функция не работает в первый раз в v-if div.

Привет, у меня есть следующая проблема с Vue js. У меня есть div, который скрыт при загрузке с помощью v-if. Когда условие v-if истинно, отображается div, но поле ввода внутри этого div не хочет фокусироваться. $ ("# Элемент"). Фокус() ;. Это происходит только в первый раз после отображения div .фокус() работает

ex. У меня есть эта функция в методах

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. 
} 

Html

<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> 

После this.boxes.lenght коробки> 0 вызывающих $ ("# БКИ") фокус(). работает и будет фокусировать поле ввода.

Answer 1

Две вещи, чтобы попробовать:

1. Использование Vue в nextTick сделать вызов фокус произойдет на следующем обновлении DOM (когда DOM полностью заполняется результатами вашего зрения изменения модели):

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

2. Попробуйте vue-focus, который привязывает операцию фокусировки к свойству модели (что означает, что вы можете избавиться от jQuery).