J'essaye d'importer une bibliothèque du plugin Vuelidate dans ma newsletter.vue .js .
Mais cette importation renvoie une erreur: Uncaught SyntaxError: Uncaught Identifiant
Comment puis-je importer ceci dans mon composant vue.js?
Tout d'abord, J'utilise webpack et j'appelle d'abord Vuelidate :
import validators from 'vuelidate/lib/validators';//this return me error
Vue.component('newsletter', {
template : '<div>\
<b-form @submit="onSubmit">\
\
\
<b-form-group id="exampleInputGroup2" label="Food" label-for="exampleInput2">\
<b-form-select\
id="exampleInput2"\
:options="foods"\
:state="$v.form.food.$dirty ? !$v.name.$error : null"\
v-model="form.food"\
/>\
\
<b-form-invalid-feedback id="input2LiveFeedback">\
This is a required field\
</b-form-invalid-feedback>\
</b-form-group>\
\
<b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>\
</b-form>\
</div>',
props : ['route_post'],
data: function()
{
return {
foods: ['apple', 'orange'],
form: {}
}
},
validations: {
form: {
name: {
required: validators.required,
minLength: validators.minLength(3)
}
}
},
});
Ensuite, je vois que je dois importer 'vuelidate / lib / validators' dans le composant afin de l'utiliser.
Comme cet exemple .
Le problème est que je ne peux pas faire une importation à l'intérieur de ma vue de composant, cela me donne toujours une erreur.
C'est le code de mon composant:
/**
* 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');
import BootstrapVue from 'bootstrap-vue'
import Vuelidate from 'vuelidate'
Vue.use(BootstrapVue)
Vue.use(Vuelidate)
/**
* 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('example-component', require('./components/ExampleComponent.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({
});
window.onload = function(){
app.$mount('#app');
}
5 Réponses :
Vous devez d'abord l'ajouter à votre application comme ceci:
import { validators } from 'vuelidate'
Ensuite, vous pouvez l'utiliser en la déstructurant, comme ceci:
import Vue from 'vue' import Vuelidate from 'vuelidate' Vue.use(Vuelidate)
J'ai webpack avec un fichier app.js et ces instructions: importez BootstrapVue depuis 'bootstrap-vue' importez Vuelidate depuis 'vuelidate' Vue.use (BootstrapVue) Vue.use (Vuelidate)
ES6 Utilisez l'importation nommée et modifiez la section des validations comme suit: import { validators, minLength } from 'vuelidate/lib/validators';
Vue.component('newsletter', {
template : `<div>
<b-form @submit="onSubmit">
<b-form-group id="exampleInputGroup2" label="Food" label-for="exampleInput2">
<b-form-select
id="exampleInput2"
:options="foods"
:state="$v.form.food.$dirty ? !$v.name.$error : null"
v-model="form.food"
/>
<b-form-invalid-feedback id="input2LiveFeedback">
This is a required field
</b-form-invalid-feedback>
</b-form-group>
<b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
</b-form>
</div>`,
props : ['route_post'],
data: function()
{
return {
foods: ['apple', 'orange'],
form: {}
}
},
validations: {
form: {
name: {
required,
minLength: minLength(3)
}
}
},
});
import {validators} de 'vuelidate / lib / validators'; renvoie-moi cette erreur SyntaxError non interceptée: jeton inattendu {
Bizarre. il s'agit d'une syntaxe générale es6 . Votre environnement est-il compatible ES6?
Équivalent ES5 pour importer monModule depuis './myModule'; est qc comme var myModule = require ('./ myModule'); .
Ou, vous utilisez Babel comme: stackoverflow.com/questions/34747693/...
L'erreur que vous avez est le résultat d'une importation incorrecte de ce que vous souhaitez utiliser. Il existe plusieurs façons d'importer cette bibliothèque.
Importez et utilisez globalement:
const { required, minLength } = require('vuelidate/lib/validators')
Vous pouvez également importer un mixin directement dans les composants:
import required from 'vuelidate/lib/validators/required' import maxLength from 'vuelidate/lib/validators/maxLength'
Pouvez-vous créer un bac à sable et je vais l'examiner?
Veuillez créer un bac à sable sur codesandbox.io afin que je puisse vérifier ce que vous faites de mal. Le code que vous avez dans la question n'est pas suffisant.
C'est laravel 5.7 avec sa pile de webpack et vuejs, il est impossible de créer un sandbox qui le simule.
Créez uniquement la partie Vue pour laquelle vous souhaitez disposer de Vuelidate.
Tout d'abord, vérifiez dans vos node_modules si vous avez installé vuelidate du tout:
npm install vuelidate --save
validators doesn Il n'y a pas d'export par défaut, vous devez utiliser la déstructuration pour importer chaque validation séparément:
import { required, minLength } from 'vuelidate/lib/validators';
Vue.component('newsletter', {
...
validations: {
name: {
required,
minLength: minLength(3)
},
importer des validateurs de 'vuelidate / lib / validators'; // cela continue de me renvoyer une erreur
@AntonioMorales, j'ai édité, on dirait qu'il ne trouve pas le 'vuelidate / lib / validators' alors essayez avec const validators = require ('vuelidate / lib / validators')
@AntonioMorales en plus de ma réponse, j'ai ajouté une note en haut, car j'ai des doutes sur le fait que vous ayez installé vuelidate?
Si j'utilise require: Uncaught ReferenceError: require n'est pas défini
@AntonioMorales, mais avez-vous installé le module de nœud?
Bien sûr, je peux appeler l'objet $ v de Vuelidate, mais je dois importer les validateurs :(
@AntonioMorales, il semble que les validateurs n'ont pas d'export par défaut dans index.js, mais des validations séparées exportées chacune. vous devez donc utiliser la déstructuration dans ce cas pour utiliser la validation. Vérifiez ma réponse
Utilisez-vous vscode et vetur? Je ne sais pas si nous avons rencontré le même problème. Mais la façon dont j'ai résolu mon problème a été d'ajouter un fichier jsconfig.json sur mon dossier de projet racine et de mettre ce code à l'intérieur.
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
// This is the line you want to add
"allowSyntheticDefaultImports": true
},
"exclude": ["node_modules", "**/node_modules/*"]
}
Je pense que le problème d'importation était dû à vscode et intellisense. N'a rien à voir avec vuelidate.
Après avoir créé votre jsconfig et l'avoir enregistré ... redémarrez vscode.
Hors sujet, mais veuillez utiliser littéraux de modèle plutôt que guillemets doubles ou simples pour les chaînes de votre modèle car elles prend en charge les caractères de nouvelle ligne .
Utilisez-vous webpack? Les importations ne fonctionnent pas sans une configuration appropriée. Avez-vous utilisé Vue CLI pour configurer le projet?