반응형
Vue 구성 요소가 레이블로 표시되지 않음
vue 컴포넌트가 표시되지 않아 어디가 잘못되었는지 알 수 없습니다.다른 시선이 어디에 오류가 발생했는지 알 수 있기를 바랍니다.npm run watch를 실행하고 있으며 캐시를 클리어했습니다.
내 앱.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* 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.
*/
Vue.component('table-draggable', require('./components/TableDraggable.vue'));
Vue.component('category-index', require('./components/CategoryIndex.vue'));
Vue.component('active-checkbox', require('./components/ActiveCheckbox.vue'));
Vue.component('supplier-code-selection', require('./components/SupplierCodeSelection.vue'));
const app = new Vue({
el: '#app'
});
My Supplier Code Selection.표시하다
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Supplier Code Selection Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
vue가 보여주기로 되어 있는 내 페이지
<div id="app">
<supplier-code-selection></supplier-code-selection>
</div>
콘솔에서도 이 에러가 발생한다.
[Vue warn]: Unknown custom element: <supplier-code-selection> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
나의 작곡가.json
{
"name": "laravel/laravel",
"description": "The Laravel Framework.",
"keywords": ["framework", "laravel"],
"license": "MIT",
"type": "project",
"require": {
"php": "^7.1.3",
"fideloper/proxy": "^4.0",
"laravel/framework": "5.6.*",
"laravel/tinker": "^1.0",
"laravelcollective/html": "^5.4.0"
},
"require-dev": {
"filp/whoops": "^2.0",
"fzaninotto/faker": "^1.4",
"mockery/mockery": "^1.0",
"nunomaduro/collision": "^2.0",
"phpunit/phpunit": "^7.0"
},
"autoload": {
"classmap": [
"database/seeds",
"database/factories"
],
"psr-4": {
"App\\": "app/"
},
"files": [
"app/Support/helpers.php"
]
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"extra": {
"laravel": {
"dont-discover": [
]
}
},
"scripts": {
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate"
],
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover"
]
},
"config": {
"preferred-install": "dist",
"sort-packages": true,
"optimize-autoloader": true
},
"minimum-stability": "dev",
"prefer-stable": true
}
그리고 내 소포.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"vue": "^2.5.7",
"vuedraggable": "^2.16.0"
}
}
코드는 맞는데 HTML에 css/js 파일을 로드하는 것을 잊어버린 것 같습니다.
이 항목을 에 추가합니다.<head>
:
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
<script defer src="{{ mix('js/app.js') }}"></script>
또, 다음의 것을 사용하는 것을 추천합니다.npm run hot
(또는yarn hot
핫 코드 새로고침이 추가됩니다.
를 추가하여 다음 코드를 시도합니다.default
속성:
Vue.component('category-index', require('./components/CategoryIndex.vue').default);
또는 다음을 시도해 보십시오.
....
import SupplierCodeSelection from './components/SupplierCodeSelection.vue'
const app = new Vue({
el: '#app',
components:{'supplier-code-selection':SupplierCodeSelection }
});
그리고.
<script>
export default {
name:'supplier-code-selection',
mounted() {
console.log('Component mounted.')
}
}
</script>
간단하게 추가.default
:
Vue.component('supplier-code-selection', require('./components/SupplierCodeSelection.vue').default);
(hello) 너무 늦었지만 다른 사람에게 유용하게 쓰일 수 있습니다.)그래서 저는 이런 문제를 cod render의 평화로 해결했습니다: h = > h (메인)새 Vue({})에 추가;
언급URL : https://stackoverflow.com/questions/55685360/vue-component-not-showing-up-in-laravel
반응형
'source' 카테고리의 다른 글
Python: 목록에서 찾기 (0) | 2022.11.05 |
---|---|
타임스탬프 열 업데이트 시 이상한 동작 (0) | 2022.11.05 |
어레이 구문과 포인터 구문 및 코드 생성 비교 (0) | 2022.11.05 |
Java Array List - 두 목록이 동일한지, 순서는 중요하지 않은지 어떻게 알 수 있습니까? (0) | 2022.11.05 |
href 식의 역할은 무엇입니까? (0) | 2022.11.05 |