при нажатии Enter перейти к следующему элементу vuejs2

Question

у меня есть функция по клику vuejs2 это функция

@change='units(chosed_item.id,$event)'

и это код этой функции для отправки идентификатора и помещения результата в массив

units:function(item_id,$event){
  var unit_id = event.target.value;
    $.ajax({
        type:'POST',
        url: path+'unit_search',
        data: {unit_id,item_id},
        success:(data) => {
            this.voucher_items.push({
                id:data['id'],
                item_desc_ar:data['item_desc_ar'],
                item_unit_name:data['item_unit_name'],
                item_smallest_unit_cost:data['item_smallest_unit_cost'],
                item_smallest_unit:data['item_smallest_unit'],
                item_smallest_unit_selling_price:data['item_smallest_unit_selling_price'],
                item_discount_value:data['item_discount_value'],
                item_tax_value:data['item_tax_value'],
            });
            this.chosed_items = [];
         }
    });       
},

и я зацикливаю voucher_items в цикле как это

<tr v-for="voucher_item , key  in voucher_items">
    <td>
        <input name='items_quantity_coast[]' type='text' class='form-control' />
    </td>
    <td>
        <input type='number' name='items_quantity_quantity[]' min='1' class='form-control' v-model='voucher_item.quantity' required />
    </td>
    <td>
        <input type='number' name='items_quantity_discount[]' min='1' class='form-control' v-model='voucher_item.item_discount_value_input' min='1' max=''/>
    </td>
</tr>

как мне сделать так, чтобы фокус ввода перешел к последнему вводу в voucher_items, например, когда я щелкаю функцию блока, делаю код выше и фокусирую ввод в

<input type='number' name='items_quantity_discount[]' min='1' class='form-control' v-model='voucher_item.item_discount_value_input' min='1' max=''/>

спасибо

Answer 1

Вы можете использовать пользовательскую директиву ..

1) Добавьте в свой компонент параметр directives.

directives: {
  focus: {
    inserted(el) {
      el.focus()
    }
  }
}

2) Используйте новую директиву v-focus, чтобы сфокусироваться на нужном элементе.

<input type='number' name='items_quantity_discount[]' min='1' class='form-control' v-model='voucher_item.item_discount_value_input' min='1' max='' v-focus/>

Это будет фокусироваться на последнем вводе в вашем последнем ряду. Если вы хотите более точный контроль над тем, на каком элементе сосредоточиться, вы можете создать пользовательскую директиву и использовать ее для элемента верхнего уровня (например, элемента таблицы), а затем использовать обычные методы обхода DOM (firtElementChild, lastElementChild и др.) нацеливаться на конкретные элементы. Процесс будет таким же.