Как использовать маску формы в Laravel с Vue
Я пытаюсь использовать маску в форме с Laravel и VueJS, используя https://vuejs-tips.github.io/vue-маска/, я новичок в Vue, поэтому я искал способ использовать маску и в итоге нашел эту библиотеку. Однако я не знаю, как использовать пример сайта, поскольку он не показывает полный пример, а только фрагменты кода.
Выводит вторую ошибку:
SyntaxError: объявления импорта могут появляться только на верхнем уровне надписи модуля: 62: 8 [Vue Warn]: Ошибка компиляции шаблона:
[Vue Warn]: не удалось разрешить директиву: маска
(найти в )
Я добавил код в blade.php
<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ script>
<script>
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
</ script>
<template>
<input type = "tel" v-mask = "'##/##/####'" />
</ template>
Ответы 1
Вы не можете импортировать в собственный (браузерный) JS, вам нужно использовать laravel mix или webpack (или любой другой сборщик)
самое простое решение: laravel-mix
npm install laravel-mix --save
затем откройте (или создайте файл webpack.mix.js) и введите это (конечно, вам нужно указать свой собственный путь)
var mix = require('laravel-mix');
mix.js('/resources/path_to_input_javascript', '/public/path_to_resulting_javascript')
В вашем входном файле вы создаете простой экземпляр vue (и импортируете свой компонент)
import Vue from 'vue';
import mask from 'path_to_component.vue'
var app = new Vue({
el: "#root", //root element name
components: {'x-mask': mask}
});
и в вашем компоненте вы помещаете код:
<script>
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
</script>
<template>
<input type = "tel" v-mask = "'##/##/####'" />
</template>
Это не так сложно, как только вы привыкнете к этому. Вы должны читать/смотреть о бандлерах.
Вы не можете импортировать в нативном JS, вам нужно использовать webpack или laravel mix