david001

Member Since 5 Years Ago

Experience Points
14,220
Total
Experience

780 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
3
Lessons
Completed
Best Reply Awards
1
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

  • Community Pillar

    Earned once your experience points ranks in the top 10 of all Laracasts users.

Level 3
14,220 XP
Apr
07
1 month ago
Activity icon

Replied to Vue <router-view>

Thanks for a reply. The first page I want to show is Home.vue How can i do that? Home.vue will have list of products and I want to display those products at front page.

Apr
06
1 month ago
Activity icon

Started a new Conversation Vue <router-view>

Hi, I am new to vue js. I am using vue router in my project. currently there are only 2 components Home.vue and Product.vue

home.vue list all the products form api and list in home .vue finally I have used component in home.blade.php

in click button i have router-link and it should display poduct component. It does display but in same page of product. But user clicks view button I want to show product component only. maybe it is because I am not using router-view in right place so it display product component in same page

Home.vue


<template>
    <div class="row">
        <div class="col-md-4" v-for="(product, index) in products" :key="index">
            <p>{{ product.name }}</p>
            <p>{{ product.description }}</p>
            <p class="badge badge-info">{{ product.price }}</p>
            <p>
                <router-link to="/product" class="btn btn-success"
                    >View
                </router-link>
            </p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            products: []
        };
    },
    mounted() {
        this.getProducts();
    },
    methods: {
        getProducts() {
            axios
                .get("/api/products")
                .then(response => {
                    this.products = response.data;
                })
                .catch(error => {
                    alert("error");
                });
        }
    }
};
</script>

product.vue


<template>
    <div>
product component
    </div>
</template>

<script>
export default {
    
}
</script>

Home.blade.php


@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('List of products') }}</div>

                <div class="card-body">
                    <home/>
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Route:

Route::get('/', function () {
    return view('home');

routes.js

import Home from './components/Home.vue';
import Product from './components/Product.vue';
export const routes = [
    { path: '/home', component: Home, name: 'Home' },
    { path: '/product', component: Product, name: 'Product' }
];

Where should i place router-view, so that I only see product component when I click view button of product. Thanks });

Apr
04
1 month ago
Activity icon

Replied to How To Use Google Map Autocomplete Address

any alternative to google search? I need free for testing purpose

Apr
02
1 month ago
Activity icon

Started a new Conversation Laravel Route Api.php

In api.php I have the following route and this is not working, however, if I put the same route in web.php it works.



Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/message/store','[email protected]')->middleware('auth');

MessageController store() method


    public function store(Request $request)
    {
        Message::create([
            'user_id' => $request->userId,
            'receiver_id' => $request->receiverId,
            'body' => $request->body,
        ]);
    }

and my ajax request is like this


 axios.post('/api/message/store',{
                body:this.body,
                receiverId:this.receiverId,
                userId:this.userId,
             
            }).then((response)=>{
              
            })
Mar
24
1 month ago
Activity icon

Started a new Conversation How To Use Google Map Autocomplete Address

Hi, I want to use the Google Maps autocomplete address but it needs an API key. Is there any way I can use it for free for testing on my website? or can we use it without API key with pure js Thanks

Mar
23
1 month ago
Activity icon

Started a new Conversation Laravel Fortify Queue Jobs- Send Email

Hi, Iam using laravel fortify pacakage. I know to send email verification while making an account with fortify package. Now I want to perform queue jobs while sending an email for verification with fortify. Will you please give me some hint? how can i perform queue jobs with fortify for sending email?

Thanks

Mar
08
2 months ago
Activity icon

Started a new Conversation Laravel Message System Table And Relationship

Hi, I have table conversations with attribute id,user_id,receiver_id, text,created_at,updated_at.

I want to get list of users from this table who has a conversations and the user name should not be repeated. For example user_id: 1John send message to receiver_id :2, David. Now when John logged in, he should see David name in chat page as he sent message to David. Similarly , when David logged in , he should see John name in his chat page because he received message from john.

My table has structure like this: User id: 1, receiver id:2 ,text:hi User id: 1, receiver id: 2 ,text: how are you?

User id:2, reciver id:1, text: I am fine.

Now when i loggedin as one user, either david or john and when i have to see list of users whom I have send messages or from whom I got massages I will get duplicates user(same user name printed multiple times) because of same user_id or receiver_id.

My question is, what should be the query so that i don't get same name repeated in my chat page multiple times? Should i design a different table structure for this? If so what should be table structure and relationship? My two models are:

User.php and Conversation. php

Method in controller.


Public function  getUser(){
 $users=User::get();
return view ('chat',compact('users');

Any help would be highly appreciated.

Mar
07
2 months ago
Activity icon

Replied to Vue Props Not Received

Thanks

Activity icon

Started a new Conversation Vue Props Not Received

I have a blade component. {{Auth()->user()->id}} shows the currently logged-in user ID. I passed this Id and receives it as a prop in Vue component but I didn't get a user ID.

<product :userId="{{ Auth::user()->id }}"></product>

Vue component


<script>
export default {
        props: ['userId'],
    data() {
        return {
            body: "",
        };
    },
    methods: {
        sendMessage() {
            alert(this.userId)
            
        }
    }
};
</script>
Mar
03
2 months ago
Activity icon

Started a new Conversation Display Product In Bootstrap Carousel Slide

Hi, I have the following carousel where I am showing first 4 item in active and remaining in carousel-item class. I have lots of product in database . I want to show 8 latest products here ,4 in active and reamaining 4 in carousel-item class. How can I achieve this in laravel? what will be the logic

controller:


public function index(){
	$products = Product::latest()->get();
return view('index',compact('products))
}

index.blade.php



<div class="container mt-5">
        <span>
            <h1>New items</h1>
            <a href="#" class="float-right">View all</a>

        </span>
        <div id="carouselExampleFade" class="carousel slide " data-ride="carousel" >
            <div class="carousel-inner">

                <div class="carousel-item active">
                    <div class="row">
                        <div class="col-3">
                            <img src="/product/car1.jpg" class="img-thumbnail">
                            <p class="text-center  card-footer" style="color: blue;">
                              
                            </p>
                        </div>

                        <div class="col-3">
                            <img src="/product/car1.jpg" class="img-thumbnail">
                            <p class="text-center  card-footer">
                             
                            </p>
                        </div>

                        <div class="col-3">
                            <img src="/product/car1.jpg" class="img-thumbnail">
                            <p class="text-center  card-footer">
                                
                            </p>
                        </div>

                        <div class="col-3">
                            <img src="/product/car1.jpg" class="img-thumbnail">
                            <p class="text-center  card-footer">
                               
                            </p>
                        </div>

                    </div>
                </div>

                <div class="carousel-item">
                    <div class="row">
                        <div class="col-3">
                            <img src="/product/car2.jpg" class="img-thumbnail">
                            <p class="text-center  card-footer">
                               
                            </p>
                        </div>

                        <div class="col-3">
                            <img src="/product/car2.jpg" class="img-thumbnail">
                            <p class="text-center  card-footer">
                                
                            </p>
                        </div>

                        <div class="col-3">
                            <img src="/product/car2.jpg" class="img-thumbnail">
                            <p class="text-center  card-footer">
                             
                            </p>
                        </div>

                        <div class="col-3">
                            <img src="/product/car2.jpg" class="img-thumbnail">
                            <p class="text-center  card-footer">
                               
                            </p>
                        </div>

                    </div>
                </div>



            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
Mar
02
2 months ago
Activity icon

Started a new Conversation Driver [] Is Not Supported.

I got driver[] not supported error when I uncomment

        App\Providers\BroadcastServiceProvider::class, in config/app.php

I am using laravel websockets for some realtime functionality. Any help would be highly appreciated.

Activity icon

Started a new Conversation Laravel Websocket Error

Hi, I am making a chat application and I am using laravel WebSocket. I got the following error and I could not solve it. please help me. I am using laravel 7

app.js:43008 WebSocket connection to 'wss://localhost/app/?protocol=7&client=js&version=7.0.3&flash=false' failed: Error in connection establishment: net::ERR_CERT_AUTHORITY_INVALID

my broadcast.php



<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Broadcaster
    |--------------------------------------------------------------------------
    |
    | This option controls the default broadcaster that will be used by the
    | framework when an event needs to be broadcast. You may set this to
    | any of the connections defined in the "connections" array below.
    |
    | Supported: "pusher", "redis", "log", "null"
    |
    */

    'default' => env('BROADCAST_DRIVER', 'null'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

           'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
              
            
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

websocket.php

<?php

use BeyondCode\LaravelWebSockets\Dashboard\Http\Middleware\Authorize;

return [

    /*
     * This package comes with multi tenancy out of the box. Here you can
     * configure the different apps that can use the webSockets server.
     *
     * Optionally you can disable client events so clients cannot send
     * messages to each other via the webSockets.
     */
    'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'enable_client_messages' => false,
            'enable_statistics' => true,
        ],
    ],

    /*
     * This class is responsible for finding the apps. The default provider
     * will use the apps defined in this config file.
     *
     * You can create a custom provider by implementing the
     * `AppProvider` interface.
     */
    'app_provider' => BeyondCode\LaravelWebSockets\Apps\ConfigAppProvider::class,

    /*
     * This array contains the hosts of which you want to allow incoming requests.
     * Leave this empty if you want to accept requests from all hosts.
     */
    'allowed_origins' => [
        //
    ],

    /*
     * The maximum request size in kilobytes that is allowed for an incoming WebSocket request.
     */
    'max_request_size_in_kb' => 250,

    /*
     * This path will be used to register the necessary routes for the package.
     */
    'path' => 'admin/websocket',

    /*
     * Dashboard Routes Middleware
     *
     * These middleware will be assigned to every dashboard route, giving you
     * the chance to add your own middleware to this list or change any of
     * the existing middleware. Or, you can simply stick with this list.
     */
    'middleware' => [
        'web',
        Authorize::class,
    ],

    'statistics' => [
        /*
         * This model will be used to store the statistics of the WebSocketsServer.
         * The only requirement is that the model should extend
         * `WebSocketsStatisticsEntry` provided by this package.
         */
        'model' => \BeyondCode\LaravelWebSockets\Statistics\Models\WebSocketsStatisticsEntry::class,

        /*
         * Here you can specify the interval in seconds at which statistics should be logged.
         */
        'interval_in_seconds' => 60,

        /*
         * When the clean-command is executed, all recorded statistics older than
         * the number of days specified here will be deleted.
         */
        'delete_statistics_older_than_days' => 60,

        /*
         * Use an DNS resolver to make the requests to the statistics logger
         * default is to resolve everything to 127.0.0.1.
         */
        'perform_dns_lookup' => false,
    ],

    /*
     * Define the optional SSL context for your WebSocket connections.
     * You can see all available options at: http://php.net/manual/en/context.ssl.php
     */
    'ssl' => [
        /*
         * Path to local certificate file on filesystem. It must be a PEM encoded file which
         * contains your certificate and private key. It can optionally contain the
         * certificate chain of issuers. The private key also may be contained
         * in a separate file specified by local_pk.
         */
        'local_cert' => null,

        /*
         * Path to local private key file on filesystem in case of separate files for
         * certificate (local_cert) and private key.
         */
        'local_pk' => null,

        /*
         * Passphrase for your local_cert file.
         */
        'passphrase' => null,
    ],

    /*
     * Channel Manager
     * This class handles how channel persistence is handled.
     * By default, persistence is stored in an array by the running webserver.
     * The only requirement is that the class should implement
     * `ChannelManager` interface provided by this package.
     */
    'channel_manager' => \BeyondCode\LaravelWebSockets\WebSockets\Channels\ChannelManagers\ArrayChannelManager::class,
];

js/bootstrap.js


window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,

    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
});
Feb
25
2 months ago
Activity icon

Started a new Conversation NPM Error

Hi , i got the following error on running

npm run watch

my node version is 15.10.0 I am using mac. please help me to solve this issue.


npm ERR! code 1
npm ERR! path /Applications/XAMPP/xamppfiles/htdocs/products
npm ERR! command failed
npm ERR! command sh -c cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/david001/.npm/_logs/2021-02-25T05_54_17_416Z-debug.log
npm ERR! code 1
npm ERR! path /Applications/XAMPP/xamppfiles/htdocs/products
npm ERR! command failed
npm ERR! command sh -c npm run development -- --watch

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/david001/.npm/_logs/2021-02-25T05_54_17_485Z-debug.log


Feb
20
2 months ago
Activity icon

Replied to Help Me To Refactor Code

Hi, Thank you for your reply. can you tell me what is subcategory in your answer

in this line:

request->maxPrice.subcategory ? 'product' :
Activity icon

Started a new Conversation Help Me To Refactor Code

Hi, I got all products from DB . But I also have a filter of products based on minimum and maximum price enter by the user. I really don't want if statement and query product based on prices here. Is there any better solutions to reduce the code here.


public function products(Request $request)
	
	//if user has search products based on minumum and maximum price 
        if($request->minimumPrice || $request->maxPrice){
           $products =  Product::where('price','>=',$request->minimumPrice)
          ->where('price','<=',$request->maxPrice))
          ->get();
       
            return view('product', compact('products');
        }else{
        $products = Product::get();
        
        return view('product.subcategory', compact('products'));
	}
}
Feb
19
2 months ago
Activity icon

Started a new Conversation How To Prevent Duplicate In Loop

Hi, I have 3 products in the database with childcategory_id 1,1 and 2 I have also relationship as below:


in Product.php 
public function childcategory()
    {
   return $this->hasOne(Childcategory::class,'id','childcategory_id');
    }

in view:

@foreach($products as $product)
                        <p>
                         
                            {{($product->childcategory->name)}}
                        </p>
  @endforeach

Is there any way I can use some conditions in childcategory() relationship so that i don't get duplicate items Thanks

Feb
18
3 months ago
Activity icon

Replied to How To Do This With Relationship

Thank you. One more step is to include this relationship in Category.php



 public function products()
   {
       return $this->hasMany(Product::class);
   }
Activity icon

Started a new Conversation How To Do This With Relationship

I have categories table and products table in the categories table, I have id/name/slug in products I have id/category_id/name/price

In my URL I have a category slug. now I want to find product from products tables based on this category user has clicked.

I did in this way


public function findProductBasedOnCategory($categorySlug)
    {
//first finding category based on slug matched
        $category = Category::where('slug',$categorySlug)->first();
        $categoryId = $category->id;
//based on category id ,find products from products table
        $products = Product::where('category_id',$categoryId)->get();
        return view('product.category',compact('products'));
    }

How can I do this easily with realtionship

Feb
15
3 months ago
Activity icon

Replied to Access Image From Storage

I put the link in the browser it works perfectly but in <img src tag it won't display image

Activity icon

Replied to Access Image From Storage

formated, please help me to solve this

Activity icon

Started a new Conversation Access Image From Storage

Hi, I am not able to access image from strorage directory in laravel

in controller I store image as

 	 $featureImage = $request->file('image')->store('public/category'); 

in blade, I access as

<img src="{{Storage::url($category->image)}}">

It works perfectly

again for a product I store as

$featureImage = $request->file('image')->store('public/product');

and access as

<img src="{{Storage::url($product->image)}}">

But this time image is not displayed It only displays from the category folder but not from the product folder.

I have two folders in the storage/public directory. I am only able to display image from the category folder but not from the product folder

Any help? Thanks

Dec
25
4 months ago
Activity icon

Replied to Private Message With Laravel

okey, Thanks I need to make pivot table. Is there any way without having a pivot table? just everything stored in messages table

Activity icon

Replied to Private Message With Laravel

@tray2 , I change it to belongsToMany(), But I didn't get anything, no any users.

Activity icon

Started a new Conversation Private Message With Laravel

Hi, I am building a simple private chat app with laravel and vue js.

I have a messages table with a column : id/sender_id/receiver_id and body

my main problem is fetching the users from the messages table. so if sender_id 1 has sent the message to receiver_id 2 then In the sender dashboard, I want to display the NAME of the receiver with receiver id 2 and on clicking the name I want to fetch conversation between these two users.

similarly, in the receiver dashboard, I want to show the list of all users who have sent a message.

so in short, as a logged-in user, I should see the name of users to whom I have sent a message and from whom I got the messages, and when clicking those names I will able to see all the conversations.

Message.php

class Message extends Model
{
    use HasFactory;

  

    public function user(){
    	return $this->belongsTo(User::class);
    }
 
}

currently, I am doing like this

Route::get('/messages','[email protected]');

public function index()
    {

        $messages = Message::with('user')
        ->groupBy('sender_id')
        ->where('receiver_id',auth()->user()->id)
        ->orWhere('sender_id',auth()->user()->id)
       
        ->get();
}

and my vue is like this

<li v-for="(person,index) in users" :key="index">
					<a href="" @click.prevent="showMessage(person.user_id)">{{person.user.name}}{{person.user_id}}</a>
					
					</li>

export default{
		data(){
			return{
				users:[],
				messages:[],
				
				
			}
		},
		mounted(){
			axios.get('/api/users').then((response)=>{
				this.users = response.data
			})
		}
//....

        
        
    }

my problem is: if I (let's say john )sent a message to David(receiver), I see John name on David dashboard which is correct so on clicking John name I can fetch all the conversation between John and David However, On john's dashboard(message sender to David) I see John's name, but I need here David's name.

so on the sender dashboard, I need the receiver name and on the receiver dashboard, I need sender name.

I think this probably related to the query. please help me. Thanks

Nov
28
5 months ago
Activity icon

Replied to How To Append Multiple Image With Javascript, Show Preview And Save With PHP

I have got the preview, preview images need to be appended in the form so that i can get in my endpoint when i submit the form.

Activity icon

Started a new Conversation How To Append Multiple Image With Javascript, Show Preview And Save With PHP

Hi, I want to have one input field for the image, user can browse up to 5 images, should have a preview of all image.

when I submit the form with' I should see 5 images on dd() in method


array:4 [▼
  "_token" => "nL99pcVlKEhj3CPyPaILvWM43JvbmkpVZ3FkvRGf"
  "image" => array:1 [▶]
  "name" =>"mobile"
  "price" => 600
]

I have made a vue component and able to show the preview of images but I am stuck here. I have to append all 5 images and when I submit the form I should have 5 images in array as above, but I got only one image. can you please check my vue js code and help me.

vue component:



<template>
	<div>
		<input type="file" @change="onFileChange" name="image[]" multiple />

  		<div id="preview" class="flex flex-wrap" >
  			{{url}}
  			<div v-for="(image,index) in url">
  				<img v-if="url" :src="image"  width="100" height="60" class="border" >
  				<a href="#" @click.prevent="removeImage(index)">Remove</a>
    		</div>
  			
    	</div>

  	</div>

	</div>
</template>

<script type="text/javascript">
	export default{
		data() {
    			return {
      			url: [],
    		}
  		},
  		methods: {
    		onFileChange(e) {
      		const file = e.target.files[0];
      	
      		this.url.push(URL.createObjectURL(file));
    	},
    	removeImage(index){
    		this.url.splice(index, 1);
    	}
  	}
}
</script>

form:

<form action="{{route('product.store')}}" method="post">@csrf

            <div class="bg-white overflow-hidden shadow-md sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <label>Image upload</label>
                   <!--  <input type="file" name="images" class="border py-2 px-3 text-grey-darkest"  accept="image/*"> -->
                <image-component/>
                    
                </div>

            </div>
</form>

controller:

public function store(Request $request){
dd($request->all());
}