I want to create a activate/deactive button in vue-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

let filteredProducts is an array in first time it has all data of product and after update product data you have a array of update products in response and again update the filteredProducts array with new updated data.

let filteredProducts = [];
acdcProduct(id) { 
      axios({
      method: "PUT",
      url: `http://localhost:8000/api/products/${id}`,
     
    }).then((res) => {
       filteredProducts = res.data
    });
            }