我是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用于要加载到刀片视图中的组件。
答案 0 :(得分:0)
您的 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 组件在某个地方出现故障而刀片服务器模板可能无法呈现任何内容,错误。