复选框不保存真实值

Question

我正在使用 Laravel 5.6 和 Vuejs 2。

如果我点击我的复选框并将值设为 true，它应该在数据库中保存一个 1，如果我点击我的复选框并将值设为 false，它会保存一个 0。

我遇到的问题是，如果我单击复选框并将其设为 true，它不会保存正确的值，不会对数据库进行任何更改，也不会出现任何错误。如果我点击我的复选框并将其设为 false，它会正确保存 0。

我确实注意到，即使我的值应该是正确的，当我 dd($category->has('active') 时，我确实得到了错误

我不确定我哪里出错了或如何解决它。

我的 vue 文件

<template>
  <div class="card-body">
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Active</th>
          <th scope="col">Title</th>
          <th scope="col">Edit</th>
          <th scope="col">Delete</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(category, index) in categoriesNew" >
          <td>
            <label>checkbox 1</label>                        
            <input name="active" type="checkbox" v-model="category.active" @click="checkboxToggle(category.id)">
          </td>

          <td>
            {{ category.title }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

  export default {

    props: ['categories'],

    data(){
      return {
        categoriesNew: this.categories
      }
    },

    methods: {
      checkboxToggle(id){
        console.log(id);
        axios.put('/admin/category/active/'+id, {
          categories: this.categoriesNew
        }).then((response) => {
          //Create success flash message
        })
      },
    },

    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

我的路线

Route::put('admin/products/updateAll', 'Admin\ProductsController@updateAll')->name('admin.products.updateAll');

Route::put('admin/category/active/{id}', 'Admin\CategoryController@makeActive')->name('admin.category.active');

Route::resource('admin/category', 'Admin\CategoryController');
Route::resource('admin/products', 'Admin\ProductsController');

我的 CategoryController@makeActive

public function makeActive(Request $request, $id)
{
  $category = Category::findOrFail($id);

  if($request->has('active'))
  { 
    $category->active = 1;
  }else{
    $category->active = 0;
  }

  $category->save();
}

我希望我说得通。如果有任何不清楚的地方或需要我提供更多信息，请告诉我

Answer 1

我已经设法让它工作了。这就是我所做的。

vue 文件

<template>
  <div class="card-body">
    <table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Active</th>
          <th scope="col">Title</th>
          <th scope="col">Edit</th>
          <th scope="col">Delete</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(category, index) in categories" >
          <td>
            <label>checkbox 1</label>                        
            <input type="checkbox" v-model="category.active" @click="checkboxToggle(category)">
          </td>

          <td>
            {{ category.title }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

  export default {

    props: ['attributes'],

    data(){
      return {
        categories: this.attributes,
      }
    },

    methods: {
      checkboxToggle (category) {
        axios.put(`/admin/category/${category.id}/active`, {
          active: !category.active
        }).then((response) => {
          console.log(response)
        })
      }
    },

    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

我的路线

Route::put('admin/category/{category}/active', 'Admin\CategoryController@makeActive')->name('admin.category.active');

还有我的 CategoryController@makeActive

public function makeActive(Request $request, $id)
{

  $category = Category::findOrFail($id);

  if(request('active') === true)
  {
    $category->active = 1;
  }else{
    $category->active = 0;
  }

  $category->save();
}

Answer 2

尝试更改此行

          categories: this.categoriesNew

到

categories: category.active

并在顶部添加一个名为 category.active: '' 的数据道具