JSFiddle - React, Tailwind, and code Playground

by LouDminsk

HTML

<div class="uk-margin">
                            <label class="uk-form-label" for="phone">Номер мобильного телефона (с кодом страны и оператора)</label>
                            <div class="uk-form-controls">
                                <input id="phone" class="uk-input uk-form-large" type="tel" placeholder="+" v-model.trim="userForm.phone" :class="validatedClass('phone')" required>
                                <div v-for="error in errors.phone" class="uk-text-danger">{{ error }}</div>
                            </div>
                            
                        </div>
<div class="uk-margin">
                            <activation-code-input v-model.trim="userForm.activationCode" label="Код активации (из вашей книги)" :validation-class="validatedClass('code')" :error-messages="errors.code"></activation-code-input>
                        </div>

Vue

Vue.config.devtools = true;
Vue.component('activation-code-input', {
    inheritAttrs: false,
    props: ['label', 'value', 'validationClass', 'errorMessages'],
    data() {
        return{
            messages: []
        }
    },
    methods: {
        reloadMessages() {
            console.log('reloadMessages')
        }
    },
    computed: {
        inputListeners: function () {
            var vm = this
            // `Object.assign` объединяет объекты вместе, чтобы получить новый объект
            return Object.assign({},
                // Мы добавляем все слушатели из родителя
                this.$listeners,
                // Затем мы можем добавить собственные слушатели или
                // перезаписать поведение некоторых существующих.
                {
                    // Это обеспечит, что будет работать v-model на компоненте
                    input: function (event) {
                        vm.$emit('input', event.target.value)
                    }
                }
            )
        }
    },
    template:
    `
        <div id="activation-code-input">
            <label class="uk-form-label" for="act-code">{{ label }}</label>
            <input class="uk-input uk-form-large" type="text" id="act-code" @onblur="reloadMessages"
                v-bind="$attrs"
                v-bind:value="value"
                v-bind:class="validationClass"
                v-on="inputListeners"
            >
            <div v-for="error in errorMessages" class="uk-text-danger"
                v-bind:errorMessages="errorMessages"
            >{{ error }}</div>
        </div>
    `
})

var elibrary = new Vue({
    el: '#app',
    data: {
        form_title: 'Электронная библиотека',
        form_topmsg1: 'ДЛЯ ВАШЕй КНИГИ ИМЕЮТСЯ ДОПОЛНЕНИЯ И У ВАС ЕСТЬ КОД АКТИВАЦИИ?',
        form_topmsg2: 'Пожалуйста, заполните форму, и мы вышлем вам ссылку для скачивания.',
        // модель ошибок валидации
        errors: {},
        // модель признака выполнения...