Vue 组件渲染代替 Laravel Blade 模板

Question

I'm new to Laravel and Vue.js and am trying to setup Typescript with Vue + Blade.我是 Laravel 和 Vue.js 的新手，正在尝试使用 Vue + Blade 设置 Typescript。 Whenever I visit my blade view it will only load the component without any of the blade template.每当我访问我的刀片视图时，它只会加载没有任何刀片模板的组件。

app.ts应用程序

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

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

list.blade.php 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 default.blade.php


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

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

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

If I don't instantiate Vue on app.ts my blade template will load just fine.如果我不在app.ts上实例化 Vue，我的刀片模板将加载得很好。 I only want to use Vue for components that will be loaded into my blade views.我只想将 Vue 用于将加载到我的刀片视图中的组件。

Answer 1

Your Vue selector wraps all your content.您的Vue选择器包装了您的所有内容。 Try wrapping only the components you want rendered with Vue using <div id="app"> :尝试使用<div id="app">只包装你想用 Vue 渲染的组件：

@extends('templates.default')

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

You only have a small amount of markup in list.blade.php .您在list.blade.php 中只有少量标记。 You can probably just move the markup into your Vue component:您可以将标记移动到您的Vue组件中：

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

Edit : I researched this a bit further for my own curiosity, looks like the blade template may fail to render any content if a Vue component is failing somewhere with an error.编辑：为了我自己的好奇心，我进一步研究了这个，如果Vue组件在某处失败并出现错误，刀片模板可能无法呈现任何内容。

Vue 组件渲染代替 Laravel Blade 模板

问题描述

1 个解决方案

解决方案1
0 2019-12-04 00:18:20

Vue 组件渲染代替 Laravel Blade 模板

问题描述

1 个解决方案

解决方案1 0 2019-12-04 00:18:20

解决方案1
0 2019-12-04 00:18:20