Vue

by skirtle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.1/index.js"></script>
<div id="app">
  <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>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    serial_numbers: [{
      barcode_id: '',
      product: '',
      amount: '',
      price: '',
    }],
  },
  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
        this.$refs
        //console.log(this.$refs.barcoded); // undefined
        
        this.$nextTick(function () { 
            //debugger;
            const nbBarcodes = this.$refs.barcoded.length;
            this.$refs.barcoded[nbBarcodes - 1].focus(); 
        });
             },
    removeElement: function(index) {
                this.serial_numbers.splice(index, 1);
            },
  }
})