首页 > 解决方案 > 复选框不保存真实值

问题描述

我正在使用 Laravel 5.6 和 Vuejs 2。

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

我遇到的问题是,如果我单击复选框并将其设为真,它不会保存正确的值,不会对数据库进行任何更改,也不会出现任何错误。如果我单击我的复选框并将其设为 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');

我的类别控制器@makeActive

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

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

  $category->save();
}

我希望我是有道理的。如果有任何不清楚的地方或者您需要我提供更多信息,请告诉我

标签: laravellaravel-5vuejs2

解决方案


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

文件

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

推荐阅读