Vuejs 在方法中获取 $refs 值

Question

I have multiple rows and I wish to get input value inside my tr refs but it returns undefined.

Code

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

Any idea?

Update

Demo

Answer 1

Using the serial_numbers object instead of refs

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

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

You should push the new element after retrieving the values you need

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