[Vuejs]-Laravel Vuejs form builder

by

0👍

Use Vue JS Component in Laravel like this.

Create Contact.vue component inside resources\assets\js\components then place your Vuejs there.

<template>
      <div>
        <h1>Contacts</h1>
        <form action="#" @submit.prevent="createContact()">
          <div class="form-group">
            <label>Name</label>
            <input v-model="contact.name" type="text" name="name" class="form-control">
          </div>
          <div class="form-group">
            <label>Email</label>
            <input v-model="contact.email" type="text" name="email" class="form-control">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary">New Contact</button>
          </div>
        </form>
      </div>
    </template>
    <script>
      export default {
        data: function(){
          return {
            contact:{
              name:'',
              email:'',
            }
          }
        },
        methods: {
          createContact: function(){
          //call axios to submit the form values in your Laravel controller method
          let self = this
           axios.post('/contact/store', params)
              .then(function(){
                self.contact.name = '';
                self.contact.email = '';
              })
              .catch(function(error){
                console.log(error);
              });
            console.log(this.contact);
            return;
          }
        }
      }
    </script>

In app.js file inside \resources\assets\js add the component 

Vue.component('contacts', require('./components/Contacts.vue'));

Finally, call the contacts component inside your blade file.

   <div class="container">
      <div id="app">
        <contacts></contacts>
      </div>
    </div>

Leave a comment