CODEWITHSUNDEEP
javascriptvue.jsvue-tables-2vuetify-datatable
Mohamed Hassan
Mohamed Hassan

Reputation: 93

add trash can or delte icon in each table row in vuejs

I am new in vue.js and I am trying to add trash icon in each row inside table and activate it to delete row but it does not work , also how can I make the input of one cell as drop down menu or list inside the table rows. the below script is copied from tutorial https://smarttutorials.net/dynamically-add-or-remove-table-row-using-vuejs/ your help is highly appreciated

<!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> ```

Upvotes: 0

Views: 1601

Answers (1)

Bad_m
Bad_m

Reputation: 45

Probably you should move your button inside v-for and don't forget about tbody tag

<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>

Upvotes: 2

Related Questions