3
votes

Le composant Vue n'apparaît pas dans laravel

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'
});


15 commentaires

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ème


Je 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 et package.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é


4 Réponses :


3
votes

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);


2 commentaires

Toujours rien J'obtiens toujours l'erreur [Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournir l'option "nom".


avez-vous ajouté name: 'supplier-code-selection' comme je l'ai mentionné dans ma réponse?



3
votes

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.


4 commentaires

Dieu merci. Ça a marché. J'ai toujours utilisé et je ne connais jamais npm run hot


@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.



0
votes

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 ({});


0 commentaires

0
votes

Ajoutez simplement .default:

 Vue.component('supplier-code-selection', require('./components/SupplierCodeSelection.vue').default);


0 commentaires