Javascript VueJs在新行上自动对焦

我有一个动态行，它通过点击按钮或扫描输入成功来添加新行，现在的问题是我不能集中精力在新行上

演示

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

模板

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

问题:

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

---

插入新的

序列号时，DOM未更新，因此我们无法对其进行聚焦

当DOM更新时，我们需要使用来运行函数


Vue.config.devtools=false；
Vue.config.productionTip=false；
var app=新的Vue({
el:“#应用程序”，
数据：{
表格：{
条形码序列号：[]
}
},
方法：{
addRow（）{
此.form.barcode\u serial\u number.push({
条形码\u序列号：“”
});
这个.$nextTick（（）=>{
const nbBarcodes=此。$refs.barcode.length；
这是。$refs.barcode[nbBarcodes-1].focus（）；
});
},
移除元素（索引）{
本表格条形码序列号拼接（索引1）；
},
}
})

序列号
去除
添加行
它说
TypeError:Cannot read property'length'of undefined
和
app.js:152131[Vue warn]：nextTick中的错误：“TypeError:Cannot read property'length'of undefined”
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);
    },
}