小编San*_*was的帖子

如何将Bootstrap Vue安装/导入/包含在我的laravel项目中？我是Vue的新手，我知道如何安装在Vue JS应用程序中，但如何添加它laravel呢？

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap-vue/src/index.scss";

.navbar-laravel {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

app.js

    /**
     * First we will load all of this project's JavaScript dependencies which
     * includes Vue and other libraries. It is a great starting point when
     * building robust, powerful web applications using Vue and Laravel.
     */

    require("./bootstrap") …

我将数据作为 a传递json encoded给我，当我打印整个 prop 变量时，它显示数据已成功接收，但我无法解析数据。Vue componentprop

配置文件.blade.php

@extends('layouts.app')

@section('content')

    <my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>

@endsection

我的个人资料.vue

<template>
    <div class="container">
        <div class="row justify-content">
            <div class="col-md-3" id="profile-image">
                <img class="img-fluid rounded" src="https://www.w3schools.com/bootstrap4/paris.jpg" alt="Profile Image">
            </div>            
            <div class="col-md-12">
                <p>{{userDetails}}</p>
                <p> Name:  {{ userDetails.first_name }} </p>
            </div>
        </div>
    </div>
</template>

<style>
#profile-image {
margin-bottom: 30px;
}
</style>

<script>
export default {
props: ["userDetails"]
}
</script>

输出

    {"user_id":2,"first_name":"Shan","last_name":"Biswas","email":"shanpro.2015@gmail.com","phone":"9508168983","created_at":"2019-05-03 05:43:17","updated_at":"2019-05-03 05:43:17"}

    Name: