Question

我正在尝试添加一个“添加”按钮，该按钮可用于将数据保存/添加/插入到我的表中，我从标记（输入类型）中键入了一些文本，但是它似乎不起作用。我已经尝试过使用Google谷歌搜索功能，但是找不到要执行的操作。

这是我的代码，我的vue.js文件

<template>
  <div>
    <b-table striped hover :items="items" id="table">      
    </b-table>
    No Produk : <input type="text" id="no_product" v-model="items.product_no" /><br>
    Nama Produk : <input type="text" id="nama_product" v-model="items.product_name" /><br>
    Harga Produk : <input type="text" id="harga_product" v-model="items.product_price" /><br>
    Quantity Produk  : <input type="text" id="qtt_product" v-model="items.product_qty" /><br>
    Line Total : <input type="text" id="line_totall" v-model="items.line_total" /><br>

  <br><br>
    <b-button @click="addRow">
    <i class=""></i>Add Row
    </b-button>
</div>

</template>

这是脚本

<script>
export default {
  data(){
    return {
      items: [{
            product_no: '1',
            product_name: 'kotak',
            product_price: '10000',
            product_qty: '5',
            line_total: 0,
        }, {
          product_no: '1',
            product_name: 'kotak',
            product_price: '10000',
            product_qty: '5',
            line_total: 0,
        }]
    }

  },
  methods: {
   addRow() {
    var noprod = document.getElementById('no_product').value;
    var nprod = document.getElementById('nama_product').value;
    var hprod = document.getElementById('harga_product').value;
    var qtyprod = document.getElementById('qtt_product').value;
    var lineprod = document.getElementById('line_totall').value;

    var table = document.getElementsByTagName('b-table')[0];

    var newRow = table.insertRow(table.rows.length);

    var cel1 = newRow.insertCell(0);
    var cel2 = newRow.insertCell(1);
    var cel3 = newRow.insertCell(2);
    var cel2 = newRow.insertCell(3);
    var cel3 = newRow.insertCell(4);

    cel1.product_no = noprod;
    cel2.product_name = nprod;
    cel3.product_price = hprod;
    cel4.product_qty = qtyprod;
    cel5.line_total = lineprod;
    console.log(print)

      },
    }
}

</script>

Answer 1

这可能会有所帮助。

new Vue({
  el: '#app',
  data: {
    items: [{
            product_no: '1',
            product_name: 'kotak',
            product_price: '10000',
            product_qty: '5',
            line_total: 0,
      }, {
          product_no: '1',
            product_name: 'kotak',
            product_price: '10000',
            product_qty: '5',
            line_total: 0,
     }],
     counter: 3
  },
  methods:{
    addTableRow: function () { 
       var obj = {
        product_no: this.counter,
        product_name: this.counter,
        product_price: this.counter,
        product_qty: this.counter,
        line_total: this.counter
      };
      this.items.push(obj); 
      this.counter++;
   }
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <table>
   <tr><th>Table</th></tr>
   <tr v-for="item in items">
     <td>{{ item.product_no }}</td>
     <td>{{ item.product_name }}</td>
     <td>{{ item.product_price }}</td>
     <td>{{ item.product_qty }}</td>
     <td>{{ item.line_total }}</td>
   </tr>
 </table>
 <button @click='addTableRow()'>Add New Row</button>
</div>

Answer 2

添加临时数据

每个addRow您都将数据放入items数组并设置临时数据

<template>
  <div>
    <b-table striped hover :items="items" id="table">

    </b-table>
    No Produk : <input type="text" id="no_product" v-model="temp.product_no" /><br>
    Nama Produk : <input type="text" id="nama_product" v-model="temp.product_name" /><br>
    Harga Produk : <input type="text" id="harga_product" v-model="temp.product_price" /><br>
    Quantity Produk  : <input type="text" id="qtt_product" v-model="temp.product_qty" /><br>
    Line Total : <input type="text" id="line_totall" v-model="temp.line_total" /><br>

  <br><br>
    <b-button @click="addRow">
    <i class=""></i>Add Row
    </b-button>
</div>

</template>

这是脚本

<script>
export default {
  data(){
    return {
      temp: {
            product_no: '',
            product_name: '',
            product_price: '',
            product_qty: '',
            line_total: 0,
        }
      items: [{
            product_no: '1',
            product_name: 'kotak',
            product_price: '10000',
            product_qty: '5',
            line_total: 0,
        }, {
          product_no: '1',
            product_name: 'kotak',
            product_price: '10000',
            product_qty: '5',
            line_total: 0,
        }]
    }

  },
  methods: {
   addRow() {
    var table = document.getElementsByTagName('b-table')[0];

    var newRow = table.insertRow(table.rows.length);

    var cel1 = newRow.insertCell(0);
    var cel2 = newRow.insertCell(1);
    var cel3 = newRow.insertCell(2);
    var cel4 = newRow.insertCell(3);
    var cel5 = newRow.insertCell(4);

    cel1.product_no = this.temp.product_no;
    cel2.product_name = this.temp.product_name;
    cel3.product_price = this.temp.product_price;
    cel4.product_qty = this.temp.product_qty;
    cel5.line_total = this.temp.line_total;
    console.log(print);

    this.temp = {
            product_no: '',
            product_name: '',
            product_price: '',
            product_qty: '',
            line_total: this.items.length,
        }

      },
    }
}

</script>

Answer 3

您应该使用没有香草的vue生态系统来做到这一点：

new Vue({
  el: '#app',
  data: {
    items: [
      {
        product_no: '1',
        product_name: 'kotak',
        product_price: '10000',
        product_qty: '5',
        line_total: 0
      }, 
      {
        product_no: '1',
        product_name: 'kotak',
        product_price: '10000',
        product_qty: '5',
        line_total: 0
      }
    ],
    newItem: {
        product_no: '',
        product_name: '',
        product_price: '',
        product_qty: '',
        line_total: null
    }
  },
  methods: {
    addRow () {
      this.items.push(this.newItem)
      this.cleanForm()
    },
    cleanForm () {
      this.newItem = {
        product_no: '',
        product_name: '',
        product_price: '',
        product_qty: '',
        line_total: null
      }
    }
  }
})

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-table striped hover :items="items">
  </b-table>
  No Produk : <input type="text" v-model="newItem.product_no" /><br>
  Nama Produk : <input type="text" v-model="newItem.product_name" /><br>
  Harga Produk : <input type="text"v-model="newItem.product_price" /><br>
  Quantity Produk  : <input type="text" v-model="newItem.product_qty" /><br>
  Line Total : <input type="number" v-model="newItem.line_total" /><br>
  <br><br>
  <b-button @click="addRow">
    <i class=""></i>Add Row
  </b-button>
</div>

无法将输入数据保存到表

3 个答案:

添加临时数据