在 vuejs 的每个表格行中添加垃圾桶或删除图标

Question

我是 vue.js 的新手，我正在尝试在表格内的每一行中添加垃圾图标和 激活它以删除行但它不起作用 ，以及如何将一个单元格的输入作为下拉菜单或表格行内的列表。 下面的脚本是从教程https://smarttutorials.net/dynamically-add-or-remove-table-row-using-vuejs/复制而来的 非常感谢您的帮助

<!DOCTYPE html>
<html>
    <head>
    <title>Report Generation</title>
        <meta charset = "UTF-8" />
    </head>
    <body> 
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th scope ="col">#</th>
                        <th scope ="col">Item No</th>
                        <th scope ="col text-right">Item Name</th>
                        <th scope ="col text-right">Price</th>
                        <th scope ="col text-right">Quntatiy</th>
                        <th scope ="col text-right">Total</th>              
                    </tr>
                </thead>
            <tr v-for="(invoice_product, index) in invoice_products" :key="index">
                <td scope="row" class="trashIconContainer">
                    <i class="far fa-trash-alt" @click="deleteRow(index, invoice_product)"></i>
                </td>
               
                <td>
                    <input class="form-control" type="text" v-model="invoice_product.product_no" />
                </td>
                <td>
                    <input class="form-control" type="text" v-model= "invoice_product.product_no" />
      </v-col>
                </td>
                <td>
                    <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_price" @change="calculateLineTotal(invoice_product)"
                    />
                </td>
                <td>
                    <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_qty" @change="calculateLineTotal(invoice_product)"
                    />
                </td>
                <td>
                    <input readonly class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.line_total" />
                </td>
            </tr>
        </table>
            <button type='button' class="btn btn-info" @click="addNewRow">
                <i class="fas fa-plus-circle"></i>
                Add
            </button>
            <button    @click="deleteRow">
            <i class="fas fa-plus-circle"></i>
                Delete
        </button>
    </template>
        </div>
        <script src= "js/vue.js"> </script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    invoice_products: [{
                        product_no: '',
                        product_name: '',
                        product_price: '',
                        product_qty: '',
                        line_total: 0
                    }]
                },methods: {
                
                    deleteRow(index, invoice_product) {
                        var idx = this.invoice_products.indexOf(invoice_product);
                        console.log(idx, index);
                        
                            this.invoice_products.splice(idx, 2);          
            
                    },
                    addNewRow() {
                        this.invoice_products.push({
                            product_no: '',
                            product_name: '',
                            product_price: '',
                            product_qty: '',
                            line_total: 0
                        });
                    }
                }
            });
        </script>
    </body>
</html> ```

Answer 1

尝试如下 sn-p:

var app = new Vue({
  el: "#app",
  data() {
    return {
      invoice_products: [{
          id: this.uniqueId(),
          product_no: '',
          product_name: '',
          product_price: '',
          product_qty: '',
          line_total: 0
      }]
    }
  },
  methods: {
    deleteRow(product) {
      this.invoice_products = this.invoice_products.filter(p => p.id !== product.id)       
    },
    addNewRow() {
      const id = this.uniqueId()
      this.invoice_products.push({
          id,
          product_no: '',
          product_name: '',
          product_price: '',
          product_qty: '',
          line_total: 0
      });
    },
    calculateLineTotal(product) {
      if (product.product_price && product.product_qty) {
        product.line_total = product.product_price * product.product_qty
      }
      this.invoice_products = [
        ...this.invoice_products.map((item) =>
          item.id !== product.id
            ? item
            : {
              ...item,
              ...product,
            }
        ),
      ];
    },
    uniqueId(length=16) {
      return parseInt(Math.ceil(Math.random() * Date.now()).toPrecision(length).toString().replace(".", ""))
    }

  }
})

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type='button' class="btn btn-info" @click="addNewRow">
    <i class="fas fa-plus-circle"></i>
    Add
  </button>
  <table>
    <thead>
      <tr>
        <th scope ="col">#</th>
        <th scope ="col">Item No</th>
        <th scope ="col text-right">Item Name</th>
        <th scope ="col text-right">Price</th>
        <th scope ="col text-right">Quntatiy</th>
        <th scope ="col text-right">Total</th>              
      </tr>
    </thead>
    <tr v-for="(invoice_product, index) in invoice_products" :key="index">
      <td scope="row" class="trashIconContainer">
        <i class="far fa-trash-alt" @click="deleteRow(invoice_product)"></i>
      </td>
      <td>
        <input class="form-control" type="text" v-model="invoice_product.product_no" />
      </td>
      <td>
        <input class="form-control" type="text" v-model= "invoice_product.product_name" />
      </td>
      <td>
        <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_price" @change="calculateLineTotal(invoice_product)"
          />
      </td>
      <td>
        <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_qty" @change="calculateLineTotal(invoice_product)"
          />
      </td>
      <td>
        <input readonly class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.line_total" />
      </td>
    </tr>
  </table>
</div>

Answer 2

也许你应该把你的按钮移到 v-for 里面，不要忘记 tbody 标签

<table>
    <thead>
    <tr>
      <th scope ="col">#</th>
      <th scope ="col">Item No</th>
      <th scope ="col text-right">Item Name</th>
      <th scope ="col text-right">Price</th>
      <th scope ="col text-right">Quntatiy</th>
      <th scope ="col text-right">Total</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(invoice_product, index) in invoice_products" :key="index">
      <td scope="row" class="trashIconContainer">
        <i class="far fa-trash-alt" @click="deleteRow(index, invoice_product)"></i>
      </td>

      <td>
        <input class="form-control" type="text" v-model="invoice_product.product_no" />
      </td>
      <td>
        <input class="form-control" type="text" v-model= "invoice_product.product_no" />
      </td>
      <td>
        <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_price" @change="calculateLineTotal(invoice_product)"
        />
      </td>
      <td>
        <input class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.product_qty" @change="calculateLineTotal(invoice_product)"
        />
      </td>
      <td>
        <input readonly class="form-control text-right" type="number" min="0" step=".01" v-model="invoice_product.line_total" />
      </td>
      <td>
        <button type='button' class="btn btn-info" @click="addNewRow">
          <i class="fas fa-plus-circle"></i>
          Add
        </button>
      </td>
      <td>
        <button    @click="deleteRow">
          <i class="fas fa-plus-circle"></i>
          Delete
        </button>
      </td>
    </tr>
    </tbody>
  </table>