时间戳

首页 > 解决方案 > 当点击进入时转到下一个元素 vuejs2

laravel - 当点击进入时转到下一个元素 vuejs2

问题描述

我有点击 vuejs2 的功能这是功能

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

这是此函数发送 id 并将结果放入数组的代码

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>

如何使输入焦点转到凭证_项目中的最后一个输入，例如当我单击单元功能时执行上面的代码并将输入集中在

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

谢谢

标签： laravelvue.jsvuejs2

解决方案

您可以使用自定义指令..

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

这将专注于最后一行的最后一个输入。如果您想更好地控制要关注的元素，您可以创建自定义指令并将其用于上层元素（例如 table 元素），然后使用普通的 DOM 遍历技术（firtElementChild等lastElementChild）来定位特定元素。该过程将是相同的。

推荐阅读