VueJs自动聚焦在新行上

Question

我有动态行，它通过单击按钮或扫描输入成功添加新行，现在的问题是我无法专注于新行。

演示

https://i.stack.imgur.com/i72Vp.gif

代码

为避免混淆，我已对代码中的所有行进行了注释。

Template

<table class="table table-bordered table-striped table-hover">

    <thead>

        <tr>

            <td><strong>Serial Number</strong></td>

            <td width="50"></td>

        </tr>

    </thead>

    <tbody>

        <tr v-for="(row, index) in form.barcode_serial_number" :key="index">

            <td>

                <el-input ref="barcode" v-model="row.barcode_serial_number"></el-input>

            </td>

            <td>

                <el-link v-on:click="removeElement(index);" style="cursor: pointer">Remove</el-link>

            </td>

        </tr>

    </tbody>

</table>

<div>

    <button type="button" class="button btn-primary" @click="addRow">Add row</button>

</div>

Script

data() {

    return {

        form: {

            barcode_serial_number: [], //get data of all rows

        },

    }

},

created() {

    //scanner

    const eventBus = this.$barcodeScanner.init(this.onBarcodeScanned, { eventBus: true })

    if (eventBus) {

        eventBus.$on('start', () => {

            this.loading = true;

            console.log('start')

        })

        eventBus.$on('finish', () => {

            this.loading = false;

            console.log('finished')

            // add new row when scan succeed

            this.$nextTick(function () { 

                this.form.barcode_serial_number.push({

                    barcode_serial_number: ''

                });

            })

        })

    }

},

methods: {

    // add autofocus to new row

    focusInput() {

        this.$refs.barcode.focus();

    },

    // add new row by clicking button

    addRow: function() {

        var barcodes = document.createElement('tr');

        this.form.barcode_serial_number.push({

            barcode_serial_number: ''

        });

    },

    // remove row by clicking button

    removeElement: function(index) {

        this.form.barcode_serial_number.splice(index, 1);

    },

}

问题

如何在新添加的行上设置自动对焦？

Answer 1

在新serial_number插入的那一刻，DOM 没有更新，所以我们不能集中它。当 DOM 更新时，我们需要使用nextTick来运行一个函数。Vue.config.devtools = false;Vue.config.productionTip = false;var app = new Vue({&nbsp; el: '#app',&nbsp; data: {&nbsp; &nbsp; form: {&nbsp; &nbsp; &nbsp; barcode_serial_number: []&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; addRow() {&nbsp; &nbsp; &nbsp; this.form.barcode_serial_number.push({&nbsp; &nbsp; &nbsp; &nbsp; barcode_serial_number: ''&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; this.$nextTick(() => {&nbsp; &nbsp; &nbsp; const nbBarcodes = this.$refs.barcode.length;&nbsp; &nbsp; &nbsp; &nbsp; this.$refs.barcode[nbBarcodes - 1].focus();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; },&nbsp; &nbsp; removeElement(index) {&nbsp; &nbsp; &nbsp; this.form.barcode_serial_number.splice(index, 1);&nbsp; &nbsp; },&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <table>&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td><strong>Serial Number</strong></td>&nbsp; &nbsp; &nbsp; &nbsp; <td width="50"></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr v-for="(row, index) in form.barcode_serial_number" :key="index">&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input ref="barcode" v-model="row.barcode_serial_number"></input>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button v-on:click="removeElement(index);">Remove</button>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table>&nbsp; <div>&nbsp; &nbsp; <button @click="addRow">Add row</button>&nbsp; </div></div>