Esta es mi mesa. Como puedes ver he añadido un botón para realizar una acción.
La acción debe cambiar de activo a no activo y de no activo a activo al hacer clic.
Parece que no puedo encontrar el área de SQL a la que puedo acceder, lo que me dificulta actualizar la base de datos al hacer clic. Cualquier sugerencia o ayuda será muy apreciada.
Si hay alguna forma de actualizar la base de datos al hacer clic en este botón, el nuevo valor también debería aparecer en la tabla de datos.
<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>Esto es lo que he intentado hacer hasta ahora. Lo siento, soy nuevo en 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) }Ejemplo para el lado vue, también debe verificar si la actualización de la base de datos fue exitosa:
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> let filteredProducts = []; acdcProduct(id) { axios({ method: "PUT", url: `http://localhost:8000/api/products/${id}`, }).then((res) => { filteredProducts = res.data }); }