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>Scriptdata() {    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({

  el: '#app',

  data: {

    form: {

      barcode_serial_number: []

    }

  },

  methods: {

    addRow() {

      this.form.barcode_serial_number.push({

        barcode_serial_number: ''

      });

      this.$nextTick(() => {

      const nbBarcodes = this.$refs.barcode.length;

        this.$refs.barcode[nbBarcodes - 1].focus();

      });

    },

    removeElement(index) {

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

    },

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <table>

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

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

        </td>

        <td>

          <button v-on:click="removeElement(index);">Remove</button>

        </td>

      </tr>

    </tbody>

  </table>

  <div>

    <button @click="addRow">Add row</button>

  </div>

</div>