Как использовать маску формы в Laravel с Vue

Question

Я пытаюсь использовать маску в форме с Laravel и VueJS, используя https://vuejs -tips.github.io / vue-the-mask / , я новичок в Vue, поэтому я искалкаким-то образом использовать маску, я нашел эту библиотеку.Однако я не знаю, как использовать пример сайта, так как он не показывает полный пример, только фрагменты кода.

Отображает вторую ошибку:

SyntaxError: объявления импорта могутпоявляются только на верхнем уровне надписи модуля: 62: 8 [Vue Warn]: ошибка компиляции шаблона:

[Vue Warn]: не удалось разрешить директиву: mask

(найдено в)

Я добавил код в 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>

Answer 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>

Это не так сложно, как только вы к этому привыкнете. Вы должны читать / смотреть о упаковщиках.