Vue Multiple Checkboxes Example Tutorial

Vue Multiple Checkboxes Example Tutorial is today’s topic. You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the component based on the input type. The v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth.

Vue Multiple Checkboxes Example Tutorial

First, create a new Vue.js project using Vue CLI using the following command.

#1: Create Vue.js project using Vue CLI.

Type the following command.

vue create mulcheckbox

Now, go into the project folder and install the bootstrap css framework.

npm install bootstrap --save

# or

yarn add bootstrap

Import the Bootstrap CSS file inside src >> main.js file.

// main.js

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('#app')

#2: Create a form in App.vue component.

Okay, now we will use bootstrap css classes to construct the form as well as its input types. In our case, it is a checkbox. Write the following code inside src >> App.vue file.

<template>
  <div id="app" class="container">
    <h2>Vue Multiple Checkbox Example</h2>
    <form @submit.prevent="send()">
      <div class="form-group">
        <div class="form-check">
          <label for="joe" class="form-check-label">
            <input type="checkbox" 
                    id="joe" 
                    class="form-check-input"
                    value="joe" 
                    v-model="checkedNames" />            
            Joe
          </label>
        </div>
       <div class="form-check">
          <label for="jack" class="form-check-label">
            <input type="checkbox" 
                    id="jack" 
                    class="form-check-input"
                    value="jack" 
                    v-model="checkedNames" />            
            Jack
          </label>
        </div>
        <div class="form-check">
          <label for="Nick" class="form-check-label">
            <input type="checkbox" 
                    id="nick" 
                    class="form-check-input"
                    value="nick" 
                    v-model="checkedNames">            
            Nick
          </label>
        </div>
        <br>
      </div>
      <div class="form-group">
        <button class="btn btn-info">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>

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

So, here, we have implemented three checkboxes. Each checkbox has its unique label, id, and value. We have used the two-way data binding with the help of v-model.

So, when the user checks the input values, it will add that value in an Array. If the user checks any checkbox, it will push that checkbox value into the checkedNames array.

When the user submits the form, we get all the checked items and convert that array into the string. So, we can directly store that values in the database.

#3: Install axios library and send values to a server.

Type the following command to install vue-axios and axios promise based library.

npm install vue-axios axios --save

# or

yarn add axios vue-axios

Add these libraries in the main.js file.

// main.js

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

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

Vue.config.productionTip = false

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

Now, write the send function inside App.vue file to send the data to the server.

<template>
  <div id="app" class="container">
    <h2>Vue Multiple Checkbox Example</h2>
    <form @submit.prevent="send()">
      <div class="form-group">
        <div class="form-check">
          <label for="joe" class="form-check-label">
            <input type="checkbox" 
                    id="joe" 
                    class="form-check-input"
                    value="joe" 
                    v-model="checkedNames" />            
            Joe
          </label>
        </div>
       <div class="form-check">
          <label for="jack" class="form-check-label">
            <input type="checkbox" 
                    id="jack" 
                    class="form-check-input"
                    value="jack" 
                    v-model="checkedNames" />            
            Jack
          </label>
        </div>
        <div class="form-check">
          <label for="Nick" class="form-check-label">
            <input type="checkbox" 
                    id="nick" 
                    class="form-check-input"
                    value="nick" 
                    v-model="checkedNames">            
            Nick
          </label>
        </div>
        <br>
      </div>
      <div class="form-group">
        <button class="btn btn-info">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>

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

I have taken the server: localhost:8000. You need to put what you are using. Then we need to put /api/ checks because we will use api.php instead of web.php route file.

#4: Setup Laravel Backend API

Install the Laravel 5.7 using the following command.

laravel new api

# or

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

Now, we need to connect the Laravel with MySQL database. So write the credentials inside the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your db
DB_USERNAME=your username
DB_PASSWORD=your password

Now, create a model, migration, and controller using the following command.

php artisan make:model Check -m
php artisan make:controller CheckController

Write the following schema inside [timestamps]create.checks.php file.

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

Now, migrate the database using the following command.

php artisan migrate

Next step is to write the route inside routes >> api.php file.

// api.php

Route::post('checks', 'CheckController@store');

Now, code the store function to save the data from the axios request and send a response.

<?php

// CheckController.php

namespace App\Http\Controllers;
use App\Check;

use Illuminate\Http\Request;

class CheckController extends Controller
{
    public function store(Request $request)
    {
      $check = new Check;
      $items = implode(",", $request->get('check_items'));
      $check->check_items = $items;

      $check->save();

      return response()->json('Your values has been saved');
    }
}

#5: Handle CORS problem

We need to add one more laravel package called laravel-cors. It will handle the  Cross-Origin Resource Sharing. So, let us install using the following command.

composer require barryvdh/laravel-cors

Now, include the  group api middleware inside App >> Http >> Kernel.php file.

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

Save the file and you are done.

#6: Send the data to the server

Go to the Vue development server: http://localhost:8080/. Check the box and send the post data to the Laravel API server. You can see the MySQL database.

Also, you can see in the browser console that, we have successfully saved the values.

Finally, Vue Multiple Checkboxes Example Tutorial is over.