文章/答案/技术大牛

发布

社区首页 >问答首页 >VueJs自动对焦新行

问VueJs自动对焦新行
EN

Stack Overflow用户

提问于 2020-04-29 02:35:17

回答 1查看 718关注 0票数 0

我有动态行，它通过单击按钮或扫描输入成功来添加新行，现在的问题是我无法将注意力集中在新行上。

演示

代码

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

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);
    },
}

问题

如何设置新添加的行的自动焦点？

javascript

vue.js

vuejs2

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-29 02:49:10

目前，插入了新的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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61493285

复制

相似问题

问VueJs自动对焦新行
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJs自动对焦新行EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VueJs自动对焦新行
EN