vuejs Archives - Codeplaners https://codeplaners.com/tag/vuejs/ Code Solution Fri, 21 May 2021 02:48:01 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png vuejs Archives - Codeplaners https://codeplaners.com/tag/vuejs/ 32 32 Vue JS Get Array And Object Length https://codeplaners.com/vue-js-get-array-and-object-length/ https://codeplaners.com/vue-js-get-array-and-object-length/#respond Fri, 21 May 2021 02:48:01 +0000 https://codeplaners.com/?p=808 Hello Dev, Today, i we will show you Vue JS Get Array And Object Length. This article will give you simple example of Vue JS Get Array And Object Length. you will learn Vue JS Get Array And Object Length. If you don’t know how to get array and object length in vue js. i … Continue reading "Vue JS Get Array And Object Length"

The post Vue JS Get Array And Object Length appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you Vue JS Get Array And Object Length. This article will give you simple example of Vue JS Get Array And Object Length. you will learn Vue JS Get Array And Object Length.

If you don’t know how to get array and object length in vue js. i will give simple example for vue js get array and object length. If you have worked on Javascript and Jquery then you know you can get array length by variable. length so same way you can get array length or object length in vue js application.

So let’s follow few step to create example of Vue JS Get Array And Object Length.

Example:-

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Array Length Or Object Length Example - ItSolutionStuff.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
   
<div id="app">
   
  <ul id="exampleApp">
    <li v-if="myArray.length">Object Length = {{ myArray.length }}</li>
    <li v-for="value in myArray">
      {{ value.category }}
    </li>
  </ul>
  
</div>
  
<script type="text/javascript">
  
    var app = new Vue({
      el: '#app',
      data: {
        myArray: [
          { category: 'Laravel' },
          { category: 'PHP' },
          { category: 'Codeigniter' }
        ]
      }
    })
  
</script>
  
</body>
</html>

Output:- Object Length = 3
Laravel
PHP
Codeigniter

The post Vue JS Get Array And Object Length appeared first on Codeplaners.

]]> https://codeplaners.com/vue-js-get-array-and-object-length/feed/ 0 Vuejs Datepicker Example https://codeplaners.com/vuejs-datepicker-example/ https://codeplaners.com/vuejs-datepicker-example/#respond Fri, 09 Apr 2021 04:45:27 +0000 https://codeplaners.com/?p=543 In this article, we will show you Vuejs datetimepicker Example. This article will give you simple example of how to disable dates in Vuejs datetimepicker. you will learn datetimepicker disable dates. Step:- 1 Create Vue App vue create myApp Step:- 2 Install vuejs-datepicker Package npm install vuejs-datepicker --save Step:- 3 Use vuejs-datepicker in App.vue open … Continue reading "Vuejs Datepicker Example"

The post Vuejs Datepicker Example appeared first on Codeplaners.

]]> In this article, we will show you Vuejs datetimepicker Example. This article will give you simple example of how to disable dates in Vuejs datetimepicker. you will learn datetimepicker disable dates.

Step:- 1 Create Vue App 

vue create myApp

Step:- 2 Install vuejs-datepicker Package 

npm install vuejs-datepicker --save

Step:- 3 Use vuejs-datepicker in App.vue

open your app.vue file and use this code
src/App.vue

<template>	
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <datepicker name="birthdate"></datepicker>
  </div>
</template>
     
<script>
import Datepicker from 'vuejs-datepicker'
     
export default {
  name: 'app',
  components: {
    Datepicker
  }
}
</script>

Now you can run vue js following command:

npm run serve

The post Vuejs Datepicker Example appeared first on Codeplaners.

]]> https://codeplaners.com/vuejs-datepicker-example/feed/ 0 How to Build Laravel Vue JS CRUD Example https://codeplaners.com/how-to-build-laravel-vue-js-crud-example/ https://codeplaners.com/how-to-build-laravel-vue-js-crud-example/#respond Thu, 04 Mar 2021 09:13:56 +0000 https://codeplaners.com/?p=444 This post was last updated on March 12th, 2021 at 12:04 pmHow to Build Laravel Vue JS CRUD Example, I will show you how to implement vue js crud example with Laravel. how to build a crude API in Laravel, for example Vue.Js Spa Crude in Laravel. In this laravel vue js crud example, you … Continue reading "How to Build Laravel Vue JS CRUD Example"

The post How to Build Laravel Vue JS CRUD Example appeared first on Codeplaners.

]]> This post was last updated on March 12th, 2021 at 12:04 pm

How to Build Laravel Vue JS CRUD Example, I will show you how to implement vue js crud example with Laravel.

how to build a crude API in Laravel, for example Vue.Js Spa Crude in Laravel.

In this laravel vue js crud example, you will learn how to implement the laravel vue js crud (create, read, update and delete) spa with Vue js router and laravel.

Laravel Vue JS CRUD (SPA) Example

  • Download Laravel
  • Configure Database
  • Install NPM
  • Create Migration, Model and Controller
  • Add Routes In web.php
  • Add Vue Js Components
  • Add Vue Js Routes
  • Add Vue App.js
  • Run Server

Step 1:- Download And Install Laravel

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

Step 2:- Configure Database

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=laravel@123

Step 3:- Install NPM

Run the following command and install npm

npm install

next step, use the command and install the vue-router and Vue-Axios will be used for calling Laravel API.

 npm install vue-router vue-axios --save

Now after this we run this command

 npm run watch

npm run watch with this command compiles the assets.

Step 4:- Create Migration, Model and Controller

Create Model

 php artisan make:model Post -m
Add code in database/migrations/create_posts_table.php
 
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
			$table->bigIncrements('id');
			$table->string('title');
			$table->text('description');
			$table->timestamps();
		});
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}
Add Post table values in app/Models/Post.php
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title', 'description'];
}
Migrate the database using the command
php artisan migrate

Create Post Controller

php artisan make:controller PostController
open PostController and define index, add, edit, delete methods in PostController.php, go to app\Http\Controllers\PostController.php
<?php

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;
//codeplaners 
class PostController extends Controller
{
    // all posts
    public function index()
    {
        $posts = Post::all()->toArray();
        return array_reverse($posts);
    }
 
    // add post
    public function add(Request $request)
    {
        $post = new Post([
            'title' => $request->input('title'),
            'description' => $request->input('description')
        ]);
        $post->save();
 
        return response()->json('post successfully added');
    }
 
    // edit post
    public function edit($id)
    {
        $post = Post::find($id);
        return response()->json($post);
    }
 
    // update post
    public function update($id, Request $request)
    {
        $post = Post::find($id);
        $post->update($request->all());
 
        return response()->json('post successfully updated');
    }
 
    // delete post
    public function delete($id)
    {
        $post = Post::find($id);
        $post->delete();
 
        return response()->json('post successfully deleted');
    }
}

Step 5:- Add Routes in Web.php

Routes/web.php
<?php
 
Route::get('{any}', function () {
    return view('app');
})->where('any', '.*');
Routes/Api.php
<?php
use Illuminate\Http\Request;
 
 
Route::get('posts', 'PostController@index');
Route::group(['prefix' => 'post'], function () {
    Route::post('add', 'PostController@add');
    Route::get('edit/{id}', 'PostController@edit');
    Route::post('update/{id}', 'PostController@update');
    Route::delete('delete/{id}', 'PostController@delete');
});

Step 6:- Add Vue Js

To setup Vue js in Laravel, create one blade view file named app.blade.php

update the code into your app.blade.php file as follow.
resources/views/layout/app.blade.php 

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" value="{{ csrf_token() }}"/>

    <title>Build Laravel Vue JS CRUD Example - CodePalners</title>

    <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet"/>
    <style>
        .bg-light {
            background-color: #eae9e9 !important;
        }
    </style>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>

Step 7:- Add Vue Js Components

Create Components folder this path resources/js/components
and components folder add file:

  • App.vue
  • AllPost.vue
  • AddPost.vue
  • EditPost.vue

Open App.vue file and update the code your file:-

<template>
    <div class="container">
        <div class="text-center" style="margin: 20px 0px 20px 0px;">
            <span class="text-secondary">Build Laravel Vue JS CRUD Example - CodePalners</span>
        </div>
 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <router-link to="/" class="nav-item nav-link">Home</router-link>
                    <router-link to="/add" class="nav-item nav-link">Add Post</router-link>
                </div>
            </div>
        </nav>
        <br/>
        <router-view></router-view>
    </div>
</template>
 
<script>
    export default {}
</script>

Open AllPost.vue file and update the code your file:-

<template>
    <div>
        <h3 class="text-center">All Posts</h3><br/>
 
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Description</th>
                <th>Created At</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="post in posts" :key="post.id">
                <td>{{ post.id }}</td>
                <td>{{ post.title }}</td>
                <td>{{ post.description }}</td>
                <td>{{ post.created_at }}</td>
                <td>{{ post.updated_at }}</td>
                <td>
                    <div class="btn-group" role="group">
                        <router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit
                        </router-link>
                        <button class="btn btn-danger" @click="deletePost(post.id)">Delete</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                posts: []
            }
        },
        created() {
            this.axios
                .get('http://127.0.0.1:8000/api/posts')
                .then(response => {
                    this.posts = response.data;
                });
        },
        methods: {
            deletePost(id) {
                this.axios
                    .delete(`http://127.0.0.1:8000/api/post/delete/${id}`)
                    .then(response => {
                        let i = this.posts.map(item => item.id).indexOf(id); // find index of your object
                        this.posts.splice(i, 1)
                    });
            }
        }
    }
</script>

Open AddPost.vue file and update the code your file:-

<template>
    <div>
        <h3 class="text-center">Add Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="addPost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Add Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        methods: {
            addPost() {
 
                this.axios
                    .post('http://127.0.0.1:8000/api/post/add', this.post)
                    .then(response => (
                        this.$router.push({name: 'home'})
                        // console.log(response.data)
                    ))
                    .catch(error => console.log(error))
                    .finally(() => this.loading = false)
            }
        }
    }
</script>

Open EditPost.vue file and update the code your file:-

<template>
    <div>
        <h3 class="text-center">Edit Post</h3>
        <div class="row">
            <div class="col-md-6">
                <form @submit.prevent="updatePost">
                    <div class="form-group">
                        <label>Title</label>
                        <input type="text" class="form-control" v-model="post.title">
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <input type="text" class="form-control" v-model="post.description">
                    </div>
                    <button type="submit" class="btn btn-primary">Update Post</button>
                </form>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                post: {}
            }
        },
        created() {
            this.axios
                .get(`http://127.0.0.1:8000/api/post/edit/${this.$route.params.id}`)
                .then((response) => {
                    this.post = response.data;
                    // console.log(response.data);
                });
        },
        methods: {
            updatePost() {
                this.axios
                    .post(`http://127.0.0.1:8000/api/post/update/${this.$route.params.id}`, this.post)
                    .then((response) => {
                        this.$router.push({name: 'home'});
                    });
            }
        }
    }
</script>

Step 8:- Add Vue Js Routes

In this folder resources>js add routes.js file.

Open routes.js file and update the code your file:-

import AllPosts from './components/AllPost.vue';
import AddPost from './components/AddPost.vue';
import EditPost from './components/EditPost.vue';
 
export const routes = [
    {
        name: 'home',
        path: '/',
        component: AllPosts
    },
    {
        name: 'add',
        path: '/add',
        component: AddPost
    },
    {
        name: 'edit',
        path: '/edit/:id',
        component: EditPost
    }
];

Step 9:- Add Vue App.js

this final step, please add the following code in the resources/js/app.js file:-

require('./bootstrap');
import Vue from 'vue';
window.Vue = require('vue');
 
import App from './components/App.vue';
import VueRouter from 'vue-router';
import VueAxios from 'vue-axios';
import axios from 'axios';
import {routes} from './routes';
 
 
 
 
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
 
const router = new VueRouter({
    mode: 'history',
    routes: routes
});
 
const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

Step 9:- Run Laravel Vue CRUD App

npm run watch
php artisan serve

Open the URL in the browser:

http://127.0.0.1:8000

The post How to Build Laravel Vue JS CRUD Example appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-build-laravel-vue-js-crud-example/feed/ 0