Question

我正在使用Laravel 5.6和Vuejs 2。

如果我单击复选框并设置为true，则应该在数据库中保存1；如果我单击复选框并设置为false，则将保存0。

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

我确实注意到，即使我的值应该为true，当我<activity android:name="com.example.android.GizmosActivity" android:label="@string/title_gizmos" > <intent-filter android:label="@string/filter_title_viewgizmos"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" />  <data android:scheme="http" android:host="www.example.com" android:pathPrefix="/gizmos" />   <data android:scheme="example" android:host="gizmos" />

时，我的确也得到了错误。

我不确定我要去哪里或如何解决它。

我的Vue文件

dd($category->has('active')

我的路线

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

我的CategoryController @ makeActive

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');

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

Answer 1

尝试更改此行

          categories: this.categoriesNew

到

categories: category.active

并在顶部添加一个数据道具，类别为“ active。”：

Answer 2

我设法使其正常工作。这就是我所做的。

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

复选框未保存真实值

2 个答案: