时间戳

首页 > 解决方案 > Vue 组件渲染代替 Laravel Blade 模板

javascript - Vue 组件渲染代替 Laravel Blade 模板

问题描述

我是 Laravel 和 Vue.js 的新手，正在尝试使用 Vue + Blade 设置 Typescript。每当我访问我的刀片视图时，它只会加载没有任何刀片模板的组件。

应用程序.ts

import Vue from "vue";
import ListClubsComponent from "./components/clubs/list-clubs.vue";

new Vue({
    el: "#app",
    components: {
        "list-clubs": ListClubsComponent
    }
});

list.blade.php

@extends('templates.default')

@section('content')
<section id="clubs-container">
    <h1>Clubs</h1>
    <list-clubs :player="{!! $player !!}"></list-clubs>
</section>
@endsection

default.blade.php


<body>
    <div id="app">
        @include('templates.header')

        <main>
            @yield('content')
        </main>

        @include('templates.footer')
    </div>
</body>

如果我不在app.ts我的刀片模板上实例化 Vue，它将加载得很好。我只想将 Vue 用于将加载到我的刀片视图中的组件。

标签： javascriptphplaravelvuejs2laravel-blade

解决方案

你的Vue选择器包装了你所有的内容。尝试使用 Vue 仅包装您想要渲染的组件<div id="app">：

@extends('templates.default')

@section('content')
<section id="clubs-container">
    <h1>Clubs</h1>
    <div id="app">
        <list-clubs :player="{!! $player !!}"></list-clubs>
    </div>
</section>
@endsection

您在list.blade.php中只有少量标记。您可能只需将标记移动到您的Vue组件中：

@section('content')
<!-- All markup is in Vue component -->
<div id="app">
    <list-clubs :player="{!! $player !!}"></list-clubs>
</div>
@endsection

编辑：出于自己的好奇心，我对此进行了进一步研究，如果Vue组件在某个地方出现错误并出现故障，刀片模板可能无法呈现任何内容。

推荐阅读