Импорт в вуе.JS компонент
Я пытаюсь импортировать библиотеку плагина Vuelidate в свой информационный бюллетень.Ву.компонент js.
Но этот импорт возвращает ошибку: Uncaught SyntaxError: Unexpected identifier
Как я могу импортировать это в мой vue.компонент на JS?
Прежде всего, я использую webpack и вызываю first Vuelidate:
/**
* 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');
}
Затем я вижу, что мне нужно импортировать "vuelidate/lib/validators" в компонент, чтобы использовать его.
Как в этом примере.
Проблема в том, что я не могу сделать импорт внутри моего компонента vue, он всегда дает мне ошибку.
Это код моего компонента:
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)
}
}
},
});
Ответы - Импорт в вуе.JS компонент / Import into a vue.js component
13.03.2019 10:49:19
ES6
Используйте именованный импорт и измените раздел проверки следующим образом:
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 myModule from './myModule'; это sth как var myModule = require('./myModule');.
13.03.2019 11:10:18
Ошибка, которую вы получили, является результатом неправильного импорта того, что вы хотите использовать. Существует несколько способов импорта этой библиотеки.
Импорт и использование по всему миру:
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
Кроме того, можно импортировать миксин непосредственно в компоненты:
import { validationMixin } from 'vuelidate'
var Component = Vue.extend({
mixins: [validationMixin],
validations: { ... }
})
Или
import { required, maxLength } from 'vuelidate/lib/validators'
Или импортируйте их по отдельности, чтобы уменьшить размер импорта:
import required from 'vuelidate/lib/validators/required'
import maxLength from 'vuelidate/lib/validators/maxLength'
Вы также можете использовать require:
const { required, minLength } = require('vuelidate/lib/validators')
Для вашего validatorsне существуют в 'vuelidate/lib/validators', поскольку это не свойство / член.
Обновление: Из приведенной Вами ссылки на пример начальной загрузки можно получить более старую версию vuelidate.
Vuelidate не предоставляет экспорт по умолчанию, поэтому этот импортный стиль import validators from 'vuelidate/lib/validators'не работает. С другой стороны, использование именованного импорта работает просто отлично.
13.03.2019 11:17:12
Во-первых, проверьте свои node_modules, если вы вообще установили vuelidate:
npm install vuelidate --save
валидаторы не имеют экспорта по умолчанию, вам нужно использовать деструктурирование для импорта каждой проверки отдельно:
import { required, minLength } from 'vuelidate/lib/validators';
Vue.component('newsletter', {
...
validations: {
name: {
required,
minLength: minLength(3)
},
const validators = require('vuelidate/lib/validators')