我想在 vue 中创建一个激活/停用按钮答案

【问题标题】：I want to create a activate/deactive button in vue我想在 vue 中创建一个激活/停用按钮
【发布时间】：2023-03-20 07:17:01
【问题描述】：

这是我的桌子。如您所见，我添加了一个按钮来执行操作。该操作需要在单击时将活动更改为不活动，并且将不活动更改为活动。我似乎找不到可以访问的 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)
}

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

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>

【讨论】：

【解决方案2】：

让filteredProducts是一个数组，第一次它包含产品的所有数据，在更新产品数据后，你有一个更新产品数组作为响应，并再次用新的更新数据更新filteredProducts数组。

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

【讨论】：