Laravel：从 Blade 模板动态地将数据传递给 Vue 组件

Question

我正在尝试将动态数据从刀片模板传递给 Vue 组件，但没有成功也没有错误，

以下是我的代码，谁能请问是什么问题，我做错了什么。

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

Answer 1

试试这个

home.blade.php

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

现在在滑块的道具中显示slides