Vue 组件渲染而不是 Laravel Blade 模板
Posted
技术标签:
【中文标题】Vue 组件渲染而不是 Laravel Blade 模板【英文标题】：Vue component rendering instead of Laravel Blade template 【发布时间】：2020-03-28 16:29:26 【问题描述】：我是 Laravel 和 Vue.js 的新手，我正在尝试使用 Vue + Blade 设置 Typescript。每当我访问我的刀片视图时，它只会加载没有任何刀片模板的组件。
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
@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 用于将加载到我的刀片视图中的组件。
【问题讨论】：
【参考方案1】：您的 Vue 选择器包含您的所有内容。尝试使用 <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
list.blade.php 中只有少量标记。您可能只需将标记移动到您的 Vue 组件中：
@section('content')
<!-- All markup is in Vue component -->
<div id="app">
<list-clubs :player="!! $player !!"></list-clubs>
</div>
@endsection
编辑：出于自己的好奇心，我对此进行了更深入的研究，看起来如果 Vue 组件在某处出现故障，刀片模板可能无法呈现任何内容错误。
【讨论】：
这是我发现的原因是id="app" 是导致它的原因，但我宁愿不必用它来包装组件。
@JoeScotto 我发现组件不需要单独包装。你应该能够包裹整个身体。我发现组件因错误而失败将导致 Vue 替换选择器，在你的情况下 app 什么都没有。检查您的控制台是否有错误。以上是关于Vue 组件渲染而不是 Laravel Blade 模板的主要内容，如果未能解决你的问题，请参考以下文章