Cara Membatasi Jumlah inputan dengan VueJS

Jadi ketika kita mempunyai sesuatu inputan, dan kita tidak ingin inputan kita itu melibihi jumlah yang kita tentukan, kita bisa menggunakan cara ini, yang akan kita pakai dan yang kita akan pelajari untuk kali ini adalah cara membatasi jumlah inputan dengan VueJS, jadi dimana kita nantinya ketika seseorang tersebut sudah melebihi batasnya maka tidak bisa lagi di ketik, atau dimasukan lagi datanya, oke seperti apa simak terus ya teman-teman.

Jadi seperti yang saya tulis di atas disini untuk cara membatasi jumlah inputan dengan VueJS, saya menggunakan sebuah vuejs, yang saya suka di vuejs terdapat sebuah data two binding jadi kita bisa menerima data langsung dari inputan dan datanya pun secara otomatis ikut berbah kita kita ingin mensetting data itu mengeluarkan outputan yang berbeda kita tinggal setting di computednya seperti itu.

Kasus kita kali ini saya mempunyai sebuah inputan no tlpn dengan jumlah batasan 12 digit, ketika sudah melebihi maka inputan tersebut sudah tidak bisa lagi di ketik, dan terdapat border merah, oke langsung saja.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<style type="text/css">
		.borderWar{
			border: 1px solid red
		}
		.form-control:focus{
			border-color: unset;
			box-shadow: none;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-4 offset-md-4" id="app">
			<div class="form-group">
				<label>Input NoTelpn</label>
				<input type="number" name="" class="form-control" v-model="name" @input="cekInp" :class="{borderWar : !minLimit}"><span>{{ minLimit }}/{{ maxLimit }}</span>
			</div>
		</div>
	</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			name: "",
			maxLimit: 12
		},
		methods:{
			cekInp(){
				this.name = this.name.substr(0, this.maxLimit)
			}
		},
		computed:{
			minLimit(){
				return this.maxLimit - this.name.length
			}
		}
	})
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

.borderWar{

border: 1px solid red

}

.form-control:focus{

border-color: unset;

box-shadow: none;

}

</style>

</head>

<body>

<label>Input NoTelpn</label>

<input type="number" name="" class="form-control" v-model="name" @input="cekInp" :class="{borderWar : !minLimit}"><span>{{ minLimit }}/{{ maxLimit }}</span>

</div>

new Vue({

el: "#app",

data: {

name: "",

maxLimit: 12

methods:{

cekInp(){

this.name = this.name.substr(0, this.maxLimit)

}

computed:{

minLimit(){

return this.maxLimit - this.name.length

}

})

</script>

</body>

</html>

Silahkan teman-teman copy data di atas, dan disini saya membuat sebuah maxLimit itu untuk maxnya, dan minNya sebalikannya, disini saya setting 12 untuk maxnya, dan disini saya memberikan v-model dengan name, ketika data di input maka fungsi method berjalan dengan batasan kita ambil dari 0 dengan batasan maxLimitnya, seperti itu.

Lalu di computednya saya membuat sebuah minLimit jadi disini computednya untuk mengatur apakah inputan itu sudah mencapai batas limit atau belum, oke sekarang kita lihat gambarnya:

oke silahkan coba sendiri, dan saya rasa cukup sampai disini belajar kita tentang cara membatasi jumlah inputan dengan VueJS semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Facebook DUMET School

Categories