我想在 vue 中创建一个 activate/deactive 按钮

Question

这是我的table。如您所见，我添加了一个按钮来执行操作。

该动作需要在单击时将活动更改为不活动，将不活动更改为活动。

我似乎无法找到我可以访问的 SQL 区域，这使得我很难在单击时更新数据库。任何建议或帮助将不胜感激。

如果有任何方法可以在单击此按钮后更新数据库，那么新值也应该出现在数据中table。

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

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

Answer 2

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

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

我想在 vue 中创建一个 activate/deactive 按钮

I want to create a activate/deactive button in vue

javascript

laravel

vue.js

vuejs2

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