Vuejs 在方法中获取 $refs 值

Question

我有多行，我希望在我的 tr refs 中获取输入值，但它返回未定义。

代码

Component

<table class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <td><strong>Serial Number</strong></td>
            <td><strong>Product</strong></td>
            <td><strong>Amount</strong></td>
            <td><strong>Price</strong></td>
            <td width="50"></td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(row, index) in serial_numbers" :key="index">
            <td>
                <el-input ref="barcoded" v-model="row.barcode_id"></el-input>
            </td>
            <td>
                <el-input ref="product" v-model="row.product"></el-input>
            </td>
            <td>
                <el-input ref="amount" v-model="row.amount"></el-input>
            </td>
            <td>
                <el-input ref="price" v-model="row.price" readonly></el-input>
            </td>
            <td>
                <el-link v-on:click="removeElement(index);" style="cursor: pointer">Remove</el-link>
            </td>
        </tr>
    </tbody>
</table>
<div>
  <el-button type="primary" class="button btn-primary" round @click="addRow">Add row</el-button>
</div>

Script

methods: {
    focusInput() {
        this.$refs.barcode_id.focus();
    },
    addRow() {
        var barcodes = document.createElement('tr');
        this.serial_numbers.push({
            barcode_id: '',
            product: '',
            amount: '',
            price: ''
        });

        // try to get value of barcode input
        console.log(this.refs.barcoded); // undefined

        this.$nextTick(function () { 
            const nbBarcodes = this.$refs.barcoded.length;
            this.$refs.barcoded[nbBarcodes - 1].focus(); 
        });
    },
}

任何想法？

更新

演示

Answer 1

使用序列号 object 而不是参考

console.log(this.serial_numbers[this.serial_numbers.length - 1]);

// this was moved from above
this.serial_numbers.push({
            barcode_id: '',
            product: '',
            amount: '',
            price: ''
        });

您应该在检索到所需的值后推送新元素

https://codepen.io/albertor24/pen/wvKYxOg