Skip to content
Advertisement

I want to create a activate/deactive button in vue

This is my table. As you can see I have added a button to perform an action.

The action needs to change active to not active and not active to active upon clicking.

I cannot seem to find the SQL area that I could access which makes it difficult for me to update the database upon clicking. Any suggestions or help will be highly appreciated.

If there is any way to update the database upon clicking this button and then the new value should also appear in the datatable.

<table class="table" id="myTable">
  <thead>
    <tr>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="product in filteredProducts" :key="product.id">
      <td>{{ product.status }}</td>
      <td>
        <div class="btn-group" role="group">
          <button class="btn btn-secondary" @click="acdcProduct(product.id)">Active/Deactive</button>
        </div>
       </td>
     </tr>
   </tbody>
 </table>

Here is what I have tried to do so far. Sorry I am new to vue.js

acdcProduct(id) { 
  this.axios
    .acdc(`http://localhost:8000/api/products/${id}`)
  let i = this.products.map(data => data.id).indexOf(id);
  this.products.status(i, active)
}

Advertisement

Answer

Example for vue side, you should also check if database update was succesfull :

new Vue({
  el: '#demo',
  data() {
    return {
      products: [
        {id: 1, name: 'prod 1', status: false},
        {id: 2, name: 'prod 2', status: false},
        {id: 3, name: 'prod 3', status: false},
        {id: 4, name: 'prod 4', status: false},
        {id: 5, name: 'prod 5', status: false},
      ]
    }
  },
  methods: {
    acdcProduct(id) { 
      /*this.axios
        .acdc(`http://localhost:8000/api/products/${id}`)*/
        let i = this.products.map(data => data.id).indexOf(id);
        this.products[i].status = !this.products[i].status
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <table class="table" id="myTable">
    <thead>
      <tr>
        <th>Status</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in products" :key="product.id">
        <td>{{ product.status ? 'active' : 'deactive' }}</td>
        <td>
          <div class="btn-group" role="group">
            <button class="btn btn-secondary" 
                    @click="acdcProduct(product.id)"
            >
              Active/Deactive
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Advertisement