Laravel vuejs Insert Multiple Checkbox Value in Database

Today, We want to share with you Laravel vuejs Insert Multiple Checkbox Value in Database.In this post we will show you Laravel Vue js Multiple Checkbox Save from Database, hear for Vue resource and multiple checkbox values store in Laravel we will give you demo and example for implement.In this post, we will learn about vue js Checkbox Checked And Save Multiple Checkbox In Database using Laravel 5.7 with an example.

Laravel vuejs Insert Multiple Checkbox Value in Database

There are the Following The simple About Laravel vuejs Insert Multiple Checkbox Value in Database Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel Vue js Multiple Checkbox Save from Database, so the Vue.js Check Uncheck All Checkboxes in Laravel for this example is following below.

Step 1 : Install Vuejs Application in Vue CLI

start to, make Vue.js Application using Vue CLI on Terminal.

vue create mulcheckbox

Import Bootstrap Javascript and CSS files
npm install bootstrap --save

import Vue from 'vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.min.css';

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#myliveapp')

Step 2: Make a HTML form in vuejs component.

src/App.vue

<template>
  <div id="myliveapp" class="container">
    <h2>Vue JS - how to save checkbox with multiple value in laravel 5.7</h2>
	<p>vuejs Insert Multiple Checkbox Value in Database Using Laravel</p>
    <form @submit.prevent="memberStore()">
      <div class="dsp form-group">
        <div class="form-check dsp">
          <label for="joe" class="pakainfo form-check-label gst">
            <input type="checkbox" 
                    id="joe" 
                    class="form-check-input"
                    value="joe" 
                    v-model="selectedMembers" />            
            Joe
          </label>
        </div>
       <div class="dsp form-check">
          <label for="jaydeep" class="pakainfo form-check-label gst">
            <input type="checkbox" 
                    id="jaydeep" 
                    class="form-check-input"
                    value="jaydeep" 
                    v-model="selectedMembers" />            
            Jaydeep
          </label>
        </div>
        <div class="dsp form-check">
          <label for="Nirav" class="pakainfo form-check-label gst">
            <input type="checkbox" 
                    id="nirav" 
                    class="form-check-input"
                    value="nirav" 
                    v-model="selectedMembers">            
            Nirav
          </label>
        </div>
        <br>
      </div>
      <div class="dsp form-group">
        <button class="btn btn-primary">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      selectedMembers: []
    }
  },
  methods: {
    memberStore() {
      console.log(this.selectedMembers.toString());
    }
  }
}
</script>

Step : 3 – install vue-axios and axios

Setup Laravel axios vue library and memberStore server side values.

npm install vue-axios axios --save

main.js

//Vue.js Check Uncheck All Checkboxes in Laravel 5.7
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
//implement import bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#myliveapp')

App.vue

<template>
  <div id="myliveapp" class="container">
    <h2>Vue Multiple Checkbox Example</h2>
	<p>Vue.js Check Uncheck All Checkboxes in Laravel</p>
    <form @submit.prevent="memberStore()">
      <div class="form-group dsp">
        <div class="dsp form-check">
          <label for="joe" class="pakainfo form-check-label gst">
            <input type="checkbox" 
                    id="joe" 
                    class="form-check-input"
                    value="joe" 
                    v-model="selectedMembers" />            
            Joe
          </label>
        </div>
       <div class="dsp form-check">
          <label for="jaydeep" class="pakainfo form-check-label gst">
            <input type="checkbox" 
                    id="jaydeep" 
                    class="form-check-input"
                    value="jaydeep" 
                    v-model="selectedMembers" />            
            Jaydeep
          </label>
        </div>
        <div class="dsp form-check">
          <label for="Nirav" class="pakainfo form-check-label gst">
            <input type="checkbox" 
                    id="nirav" 
                    class="form-check-input"
                    value="nirav" 
                    v-model="selectedMembers">            
            Nirav
          </label>
        </div>
        <br>
      </div>
      <div class="dsp form-group">
        <button class="btn btn-primary">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      selectedMembers: []
    }
  },
  methods: {
    memberStore() {
      let obj = {
        select_members: this.selectedMembers
      }
      this.axios.post('http://localhost:8000/api/memberselects', obj)
          .then(res => console.log(res.data));
    }
  }
}
</script>

Step 4 : Setup Laravel 5.7 Application

Install Laravel Backend API

composer create-project laravel/laravel atmiya25 --prefer-dist

Step 4.1 Laravel Model, migration and Controller

Create a Laravel model, Laravel migration, as well as Laravel controller

php artisan make:model Member -m
php artisan make:controller memberController

Create a Laravel Database Table

public function up()
{
        Schema::create('memberselects', function (Blueprint $table) {
            $table->increments('id');
            $table->string('select_members');
            $table->timestamps();
        });
}

//migrate the database using Laravel PHP artisan
php artisan migrate

Step 4.2 : Define a Laravel Routing

routes/api.php

Route::post('memberselects', '[email protected]');

memberController.php

<?php

// memberController.php

namespace App\Http\Controllers;
use App\Member;

use Illuminate\Http\Request;

class memberController extends Controller
{
    public function store(Request $request)
    {
      $member = new Member;
      $members = implode(",", $request->get('select_members'));
      $member->select_members = $members;

      $member->save();

      return response()->json('Your All the member Data values has been saved successfully');
    }
}

Step 5: Laravel Handle CORS problem

Setup using the following simple Solution Adding Cross Origin Resource Sharing (CORS) command on Terminal.

composer require barryvdh/laravel-cors

Step 6 : Included Laravel Group api middleware

App/Http/Kernel.php

'api' => [
     'throttle:60,1',
     'bindings',
     \Barryvdh\Cors\HandleCors::class,
],

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  PHP Autocomplete search with typeahead.js

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Laravel vuejs Insert Multiple Checkbox Value in Database.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]