Флажок не сохраняет истинное значение

Question

Я использую Laravel 5.6 и Vuejs 2.

Если я нажму на свой флажок и установлю значение true, это должно сохранить 1 в базе данных, а если я нажму на свой флажок и сделаю значение false, это сохранит 0.

Проблема, с которой я столкнулся, заключается в том, что, если я нажимаю на свой флажок и делаю его истинным, он не сохраняет правильное значение, в базу данных не вносятся изменения, и я не получаю никаких ошибок. Если я нажму на свой флажок и сделаю его ложным, он правильно сохранит 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: ''