CODEWITHSUNDEEP
laravelvue.js
Jagjeet Singh
Jagjeet Singh

Reputation: 1572

Laravel: Dynamically pass data to Vue Component from Blade Template

I am trying to pass dynamic data to Vue Component from blade template but no success and no error,

Following is my code, can anyone please what is the issue, Is i doing something wrong.

app.js

require('./bootstrap');
window.Vue = require('vue');

Vue.component('slider', require('./components/HomeSlider.vue').default);

const app = new Vue({
  el: '#app'
});

HomeSlider.vue

<template>
 <slick ref="slick" class="home-slider" :options="slickOptions">
        <div class="image" v-for="slide in slides" :key="slide.id">
            <a href="">
                <img :src="slide.src" alt="option image" />
            </a>
        </div>
    </slick>
</template>
<script>
 import '../../../node_modules/slick-carousel/slick/slick.css';
    import '../../../node_modules/slick-carousel/slick/slick-theme.css';
    import '../../sass/slick.scss';
    import Slick from 'vue-slick';
    export default {
        components: {
            Slick
        },
        props: ['slides'],
        data() {
            return {
                slickOptions: {
                    autoplay: 1
                }
            };
        },
        mounted() {
            // console.log(this.slides)
        }
    }
</script>

home.blade.php

@extends('layouts.app')
@section('content')
 <slider v-bind="slides"></slider>
@endsection

HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller {
    /**
        * Create a new controller instance.
        *
        * @return void
    */
    public function __construct() {
    }

    /**
        * Show the application dashboard.
        *
        * @return \Illuminate\Contracts\Support\Renderable
    */
    public function index() {
        $slides = [
            ['id' => 1, 'image' => '1.jpg'],
            ['id' => 2, 'image' => '2.jpg'],
            ['id' => 3, 'image' => '3.jpg'],
        ];
        return view('home', compact('slides'));
    }
}

Upvotes: 0

Views: 1557

Answers (1)

Anmup Giri
Anmup Giri

Reputation: 170

Try this

home.blade.php

@extends('layouts.app')
@section('content')
 <slider :slides="{{ json_encode($slides) }}"></slider>
@endsection

now aspect slides in props of slider

Upvotes: 1

Related Questions