OrsosAdam/vue-min-max-directive.html

## vue-min-max-directive.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        my number between 1-366:
        <input type="number" v-model="number" v-min-max="{min: 1, max:366, msg: 'Nem jó a megadott érték!'}">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.directive('min-max', {
            inserted: function (el, binding, vnode) {
                var { min, max, msg } = binding.value; // es6 jósággal kiszedjük az értékeket
                var errorHolder = document.createElement('div');
                errorHolder.style.display = "none";
                errorHolder.innerHTML = msg;
                vnode.elm.parentElement.appendChild(errorHolder);
                el.addEventListener('blur', () => {
                    if (el.value < min || el.value > max) {
                        var event = new Event('change', { bubbles: true })
                        // el.value = 69; //Az lesz amit akarsz
                        errorHolder.style.display = "block";
                        el.dispatchEvent(event); //A vue is tudjon róla, diszpaccs megy
                    } else {
                        error = false;
                        errorHolder.style.display = "none";
                    }
                });

            }
        })
        new Vue({
            el: '#app',
            data() {
                return {
                    number: 13,
                }
            }
        });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>
	<div id="app">
	my number between 1-366:
	<input type="number" v-model="number" v-min-max="{min: 1, max:366, msg: 'Nem jó a megadott érték!'}">
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	Vue.directive('min-max', {
	inserted: function (el, binding, vnode) {
	var { min, max, msg } = binding.value; // es6 jósággal kiszedjük az értékeket
	var errorHolder = document.createElement('div');
	errorHolder.style.display = "none";
	errorHolder.innerHTML = msg;
	vnode.elm.parentElement.appendChild(errorHolder);
	el.addEventListener('blur', () => {
	if (el.value < min \|\| el.value > max) {
	var event = new Event('change', { bubbles: true })
	// el.value = 69; //Az lesz amit akarsz
	errorHolder.style.display = "block";
	el.dispatchEvent(event); //A vue is tudjon róla, diszpaccs megy
	} else {
	error = false;
	errorHolder.style.display = "none";
	}
	});

	}
	})
	new Vue({
	el: '#app',
	data() {
	return {
	number: 13,
	}
	}
	});
	</script>
	</body>

	</html>