Блог

Это мой столик. Как вы можете видеть, я добавил кнопку для выполнения действия. Действие должно быть изменено на активное на неактивное и неактивное на активное при нажатии. Кажется, я не могу найти область SQL, к которой я мог бы получить доступ, что затрудняет обновление базы данных при нажатии. Любые предложения или помощь будут высоко оценены. Если есть какой-либо способ обновить базу данных после нажатия этой кнопки, а затем новое значение также должно появиться в таблице данных.

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

Вот что я пытался сделать до сих пор. Извините, я новичок в 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)
}
 

Пример для стороны vue, вы также должны проверить, было ли обновление базы данных успешным :

 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> 

пусть filteredProducts-это массив, в котором в первый раз содержатся все данные о продукте, а после обновления данных о продукте у вас есть массив продуктов обновления в ответ и снова обновите массив filteredProducts новыми обновленными данными.

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