Mon composant vue n'apparaît pas et je ne peux pas voir où je me suis trompé, j'espère qu'un autre regard pourra vous indiquer où je me suis trompé. J'exécute npm run watch et j'ai vidé mon cache.
Mon app.js
{ "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" } }
My SupplierCodeSelection. vue
{ "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 }
ma page que la vue est censée afficher
[Vue warn]: Unknown custom element: <supplier-code-selection> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
J'obtiens également cette erreur dans ma console
<div id="app"> <supplier-code-selection></supplier-code-selection> </div>
Mon composer.json
<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>
et mon package.json p>
/** * 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' });
4 Réponses :
Essayez le code suivant en ajoutant la propriété default
:
<script> export default { name:'supplier-code-selection', mounted() { console.log('Component mounted.') } } </script>
ou essayez ceci:
.... import SupplierCodeSelection from './components/SupplierCodeSelection.vue' const app = new Vue({ el: '#app', components:{'supplier-code-selection':SupplierCodeSelection } });
et
Vue.component('category-index', require('./components/CategoryIndex.vue').default);
Toujours rien J'obtiens toujours l'erreur [Vue warn]: Élément personnalisé inconnu:
avez-vous ajouté name: 'supplier-code-selection'
comme je l'ai mentionné dans ma réponse?
Votre code est correct, mais il semble que vous ayez oublié d'inclure le chargement des fichiers css / js dans votre HTML.
Ajoutez ceci au :
<link rel="stylesheet" href="{{ mix('css/app.css') }}" /> <script defer src="{{ mix('js/app.js') }}"></script>
Je suggère également d'utiliser npm run hot
(ou yarn hot
), cela ajoutera le rechargement du code à chaud.
Dieu merci. Ça a marché. J'ai toujours utilisé
et je ne connais jamais npm run hot code >
@Nikki Heureux que cela ait aidé. L'utilisation de asset ()
ne fait que charger l'élément, mais l'utilisation de mix ()
charge le fichier compilé (par Laravel Mix). Il prendra également en charge la commutation entre l'environnement de développement et de production, et bien d'autres. Voici la documentation: laravel.com/docs/5.6/mix
J'ai essayé ça. Mais oups. ne fonctionne pas ... mix ne charge pas la feuille de style et js
@KarthikSWOT Essayez d'ajouter une barre oblique avant les chemins de fichiers.
bonjour)) peut-être trop tard mais cela peut être utile à quelqu'un d'autre)). j'ai donc résolu ce genre de problème par cette paix de rendu de morue: h => h (Main). Ajouté dans la nouvelle Vue ({});
Ajoutez simplement .default
:
Vue.component('supplier-code-selection', require('./components/SupplierCodeSelection.vue').default);
une erreur dans la console?
je suppose que c'est à cause du nom, hiphen (-). essayez de donner le nom
supplierCodeSelection
@KaranSadana - Je viens d'ajouter l'erreur à ma question.
Montrez les versions Laravel et Vue, s'il vous plaît.
@KaranSadana - Je lui ai donné le nom
supplierCodeSelection
et j'ai toujours le même problèmeJe dois confirmer que vous avez donné le nom dans
Vue.component ('supplierCodeSelection', require ('./ components / SupplierCodeSelection.vue'));
et également mettre à jour la lame comme@KaranSadana - oui, je l'ai fait et j'ai même vidé ma cache au cas où.
@Nikki s'il vous plaît vérifier ma réponse mise à jour
@Nikki essaie de donner un nom à votre composant comme
export default {name: your-component-name, mount () {// vous êtes monté stuff}}
et utilisez le même nom dans un autre fichier@Nikki Ajoutez les versions Laravel et Vue à la question, s'il vous plaît
@Styx - Désolé, mais qu'entendez-vous par versions laravel et vue? Voulez-vous que je spécifie quel code est vue et lequel est laravel?
@Nikki Non, les versions de Laravel et Vue. Ou montrez simplement votre
composer.json
etpackage.json
.@Nikki avez-vous essayé en donnant un nom, vous pouvez suivre ceci comme stackoverflow.com/questions/49154490/... espérons que son aide
@Styx - J'ai mis à jour ma question pour ajouter à la fois composer.json et package.json
@KaranSadana - Boussadjra Brahim a suggéré la même chose que vous et cela n'a toujours pas fonctionné