Zir*_*ekx 5 laravel vue.js vue-component
好吧,我的问题是我无法在 Laravel 中设置多个 Vue 组件。当我设置一个时,其中一个会加载,但同时两个不会加载。
应用程序.js:
require('./bootstrap');
import { createApp } from 'vue'
import Home from './components/Home.vue';
import Offers from './components/Offers.vue';
const app=createApp({});
app.component('home',Home);
app.component('offers',Offers);
app.mount('#app');
Run Code Online (Sandbox Code Playgroud)
欢迎.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
</head>
<body class="antialiased">
<div id="app">
<Home />
<Offers />
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
每个 vue 组件如下所示:
<template>
<div>
<p>test</p>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
小智 1
我已经使用 vue-loader 在全新的 Laravel 和 Vue 3 上测试了您的问题。并发现该问题与自关闭元素相关,请通过更改以下内容来查看其是否有效:
<div id="app">
<Home />
<Offers />
</div>
Run Code Online (Sandbox Code Playgroud)
对此:
<div id="app">
<Home></Home>
<Offers></Offers>
</div>
Run Code Online (Sandbox Code Playgroud)
由于某种原因,我不知道为什么,自闭合标签的行为就像嵌套的一样。它认为Offers在里面Home
| 归档时间: |
|
| 查看次数: |
470 次 |
| 最近记录: |