Laravel: Dynamically pass data to Vue Component from Blade Template

Question

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'));
    }
}

simply add prop in slider.vue component and pass dat like i said in above comment — Karan Sadana
– Karan Sadana, Commented Aug 2, 2019 at 5:35

Anmup Giri · Accepted Answer · 2019-08-02 06:24:55Z

1

Try this

home.blade.php

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

now aspect slides in props of slider

answered Aug 2, 2019 at 6:24

Anmup Giri

1701 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel: Dynamically pass data to Vue Component from Blade Template

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related