我的 Vue 组件没有出现在 Laravel 中
Posted
技术标签:
【中文标题】我的 Vue 组件没有出现在 Laravel 中【英文标题】：My Vue component is not showing up in Laravel 【发布时间】：2021-11-23 09:31:36 【问题描述】：我的 vue 组件没有显示出来，我看不出这里有什么问题。 我的控制台没有错误，我使用 npm run hot
我的 app.js
require('./bootstrap');
window.Vue = require('vue').default;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('follow-button', require('./components/FollowButton.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the javascript scaffolding to fit your unique needs.
*/
const app = new Vue(
el: '#app',
);
我的 FollowButon.vue 组件
<template>
<div>
<button class="btn btn-primary ml-4" v-text="buttonText"></button>
</div>
</template>
<script>
export default
mounted()
console.log('Component mounted.')
</script>
vue 应该展示的地方
extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-3 p-5">
<img src=" $user->profile->profileImage() " class="rounded-circle w-100">
</div>
<div class="col-9 pt-5">
<div class="d-flex justify-content-between align-items-baseline">
<div class="d-flex align-items-center pb-3">
<div class="h4">$user->name</div>
<follow-button></follow-button>
</div>
@can('update',$user->profile)
<a href="/p/create">Add New Post</a>
@endcan
</div>
@can('update',$user->profile)
<a href="/profile/ $user->id /edit">Edit profile</a>
@endcan
<div class="d-flex">
<div class="pr-5"><strong> $user->posts->count() </strong> posts</div>
<div class="pr-5"><strong>23k</strong> followers</div>
<div class="pr-5"><strong>212</strong> following</div>
</div>
<div class="pt-4"><strong> $user->profile->title</strong></div>
<div> $user->profile->description</div>
<div><a href="#">$user->profile->url</a></div>
</div>
</div>
<div class="row pt-5">
@foreach($user->posts as $post)
<div class="col-4 pb-5">
<a href ="/p/ $post->id ">
<img src="/storage/ $post->image "; class="w-100">
</a>
</div>
@endforeach
</div>
</div>
@endsection
我的<head> 部分有这个
<script src=" asset('js/app.js') " defer></script>
如果我把它改成
<link rel="stylesheet" href=" mix('css/app.css') " />
<script defer src=" mix('js/app.js') "></script>
还是不行
here 的任何回答也对我不起作用。
【问题讨论】：
【参考方案1】：您必须将app Id 添加到<follow-button></follow-button> 的元素父级
喜欢这个
<div id="app">
<follow-button></follow-button>
</div>
【讨论】：
我也试过了，可惜还是不行。 没有 npm 错误？添加app id 时没有控制台错误？
是的，我已经按照本教程进行操作：youtu.be/ImtZ5yENzgE?t=12313 我知道它有点过时了，但我设法让一切工作到现在为止，而且家伙甚至没有在那里添加 id。跨度>
我打开了教程的代码，在resources/views/layouts/app.blade.phpline: 23github.com/coderstape/freecodegram找到你会找到id，检查你已经添加了它
哦，你是对的。我已在我的页面上将 id 更改为 app2：<div id ="app2"> <follow-button></follow-button> </div> 并在 app.js 上：const app2 = new Vue( el: '#app2', ); 现在可以使用了。谢谢你，兄弟。我浪费了一整天的时间。以上是关于我的 Vue 组件没有出现在 Laravel 中的主要内容，如果未能解决你的问题，请参考以下文章
为啥 vue js 组件没有显示在 laravel 刀片中？