CODEWITHSUNDEEP
vue.js
CodeNA
CodeNA

Reputation: 3

How can I remove a row from a table when I already sent the information

I have a table like this:

<table
  v-if="total > 0"
  class="table table-bordered"
  id="dataTable"
  width="100%"
  cellspacing="0"
>
  <thead>
    <tr>
      <th>
        <input type="checkbox" v-model="selectAll" />
      </th>
      <th>Sucursal</th>
      <th>Monto</th>
      <th>Fecha</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th></th>
      <th>Sucursal</th>
      <th>Monto</th>
      <th>Fecha</th>
    </tr>
  </tfoot>
  <tbody>
    <tr v-for="(post, index) in posts" v-bind:index="index">
      <td>
        <input
          type="checkbox"
          v-model="selected"
          :value="post.collection_date +'_'+ post.amount +'_'+ post.branch_office_id"
          number
        />
      </td>
      <td>{{ post.branch_office_name }}</td>
      <td>$ {{ formatPrice(post.amount) }}</td>
      <td>{{ formatDate(post.collection_date) }}</td>
    </tr>
  </tbody>
</table>

I have a checkbox which I push and then I click in a send button and this rows are sent to database but I'd like to remove them automaticly after they will be sent, how can I remove them after I send them?

My vuejs code which sends the checbox:

onSubmitCollectionSeat(e) {
    e.preventDefault();
   let currentObj = this;

   const config = {
       headers: { 'content-type': 'multipart/form-data' }
   }

   let formData = new FormData();
   formData.append('selected', this.selected);

   axios.post('/api/transbank_collection_accounting/store?api_token='+App.apiToken, formData, config)
   .then(function (response) {
       currentObj.success = response.data.success;
   })
   .catch(function (error) {
       console.log(error);
   });

   this.$refs.addSeat.reset(); // This will clear that form

   this.$awn.success("El registro ha sido agregado", {labels: {success: "Éxito"}});
}

Upvotes: 0

Views: 305

Answers (1)

db3000
db3000

Reputation: 469

You could provide the "posts" array as a computed property. Using v-for and indexing each table row allows you to remove the element of the array if it has been successfully send to your database.

By providing "posts" as computed property your table should automatically be adjusted.

...
 <tr v-for="(post, index) in getPosts" v-bind:index="index">
...
computed: {
  getPosts() {
     return this.posts;
  }
},
data() {
  return {
    posts: ["post1", "post2"],
  }
}

Upvotes: 1

Related Questions