Импорт в вуе.JS компонент

Импорт в вуе.JS компонент

13.03.2019 10:38:15 Просмотров 166 Источник

Я пытаюсь импортировать библиотеку плагина 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)
        }
      }
    },

});
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component#comment97013774_55136623
Вне темы, но, пожалуйста, используйте литералы шаблона , а не двойные или одинарные кавычки для строк шаблона, поскольку они поддерживают символы новой строки .
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component#comment97016909_55136623
Вы используете webpack? Импорт не работает без правильной настройки. Вы использовали Vue CLI для настройки проекта?

Ответы - Импорт в вуе.JS компонент / Import into a vue.js component

SrAxi

13.03.2019 10:45:37

Сначала вы должны добавить его в свое приложение следующим образом:

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Затем вы можете использовать его путем деструктурирования, например:

import { validators } from 'vuelidate'
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55136728#comment97013868_55136728
У меня есть webpack с приложением.js-файл и эта инструкция: импорт BootstrapVue из 'bootstrap-vue ' импорт Vuelidate из' vuelidate ' Vue.используйте (BootstrapVue) Vue.использование (Vuelidate)
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55136728#comment97014662_55136728
Я редактирую главный пост с дополнительной информацией
vahdet

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)
        }
      }
    },

});
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55136768#comment97014000_55136768
import { validators } from 'vuelidate / lib / validators'; верните мне эту ошибку Uncaught SyntaxError: Unexpected token {
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55136768#comment97014261_55136768
Странный. это общий синтаксис es6 . Ваша среда ES6 совместима?
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55136768#comment97014325_55136768
Неа человек, как использовать это с ES5'
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55136768#comment97014437_55136768
Эквивалент ES5 для import myModule from './myModule'; это sth как var myModule = require('./myModule');.
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55136768#comment97014586_55136768
Или, вы используете Babel, как: stackoverflow.com/questions/34747693/…
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55136768#comment97014648_55136768
Я редактирую главный пост с дополнительной информацией
John Kennedy

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'не работает. С другой стороны, использование именованного импорта работает просто отлично.

https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137064#comment97014612_55137064
Можете ли вы создать песочницу, и я посмотрю на нее?
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137064#comment97014646_55137064
Я редактирую главный пост с дополнительной информацией
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137064#comment97014729_55137064
Пожалуйста, создайте песочницу по адресу codesandbox.io так что я могу посмотреть, что вы делаете неправильно. Код, который у вас есть в вопросе, недостаточен.
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137064#comment97014764_55137064
Он и Laravel 5.7 с его стеком webpack и vuejs, невозможно создать "песочницу", которая имитирует его.
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137064#comment97014866_55137064
Создайте только часть Vue, для которой вы хотите иметь Vuelidate.
niklaz

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)
},
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137166#comment97014715_55137166
импорт валидаторов из 'vuelidate / lib / validators';/ / это продолжает возвращать мне ошибку
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137166#comment97014800_55137166
@AntonioMorales, я редактировал, похоже, не найти 'vuelidate/Либ/валидаторов так попробовать с const validators = require('vuelidate/lib/validators')
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137166#comment97014918_55137166
@AntonioMorales в дополнение к моему ответу, я добавил Примечание вверху, так как у меня есть сомнения, что вы установили vuelidate?
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137166#comment97015079_55137166
Если я использую require: Uncaught ReferenceError: require не определен
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137166#comment97015101_55137166
@AntonioMorales, но вы установили модуль узла вообще?
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137166#comment97015143_55137166
Конечно, я могу вызвать объект $v Vuelidate, но мне нужно импортировать валидаторы :(
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137166#comment97016135_55137166
вы пробовали с миксинами?
https://stackoverflow.com/questions/55136623/import-into-a-vue-js-component/55137166#comment97016565_55137166
@AntonioMorales, похоже, что валидаторы не имеют экспорта по умолчанию в индексе.js, но отдельные проверки экспортируются каждый. поэтому вам нужно использовать деструктурирование в этом случае, чтобы использовать проверку. Проверьте мой ответ
Закрыть X