第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

VueJs自動(dòng)聚焦在新行上

VueJs自動(dòng)聚焦在新行上

米琪卡哇伊 2022-07-21 10:05:19
我有動(dòng)態(tài)行,它通過(guò)單擊按鈕或掃描輸入成功添加新行,現(xiàn)在的問(wèn)題是我無(wú)法專(zhuān)注于新行。演示https://i.stack.imgur.com/i72Vp.gif代碼為避免混淆,我已對(duì)代碼中的所有行進(jìn)行了注釋。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);    },}問(wèn)題如何在新添加的行上設(shè)置自動(dòng)對(duì)焦?
查看完整描述

1 回答

?
紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

在新serial_number插入的那一刻,DOM 沒(méi)有更新,所以我們不能集中它。


當(dāng) DOM 更新時(shí),我們需要使用nextTick來(lái)運(yùn)行一個(gè)函數(shù)。


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>


查看完整回答
反對(duì) 回復(fù) 2022-07-21
  • 1 回答
  • 0 關(guān)注
  • 206 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)