Question

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

这是此函数用于将ID发送结果并将结果放入数组中的代码

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

，我循环循环voucher_items 像这样

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>

谢谢

Answer 1

您可以使用custom directive ..

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等）来定位特定元素。过程将相同。

点击后进入下一个元素vuejs2

1 个答案: