Cara Menampilkan Value Form Input Dengan Vue JS

Pada artikel ini kita akan menampilkan apa yang di masukan atau ketikkan yang berasal form input. Jadi saat mengetikkan sesuatu pada form input maka langsung akan ditampilkan sesuai apa yang dimasukkan. Dalam dunia pemograman tentu banyak cara untuk menghasilkan apa yang diinginkan. Sebagai contoh kasus sekarang kita belajar membuatnya menggunakan Framework Javascript Vue JS.

Baiklah langsung saja kita membuatnya, sebelum dimulai baiknya sahabat kunjungi web Bootstrap dan VueJS untuk mengcopy link library yang nanti akan kita sisipkan pada bagian tag <head> .Kemudian buatlah file baru lalu beri nama

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara menampilkan value form input dengan vuejs</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-4 offset-4 mt-5">
				<h4 class="text-center">Menampilkan nilai inputan dengan Vue JS</h4>
			<template id="inputan">
			  <div>
			    <label>{{ label }}</label>
			    <input 
			           :value="value" 
			           :type="type" 
			           class="form-control"
			           @input="$emit('input', $event.target.value)"
			           >
			  </div>
			</template> 
			<div id="app" class="text-left my-4">
			  <inputan label="Username:"
			            v-model="form.username" >
			    </inputan>	 
			    <p class="text-primary m-2">{{form.username}}</p> 
			    <inputan label="Email:"
			            v-model="form.email" >
			    </inputan>	 
			    <p class="text-success m-2">{{form.email}}</p> 
			</div>
					</div>
				</div>
			</div>

JIka sudah tambahkan script seperti dibawah ini:

Vue.component('inputan', {
  template: '#inputan',
  props: {
    label: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text',
      validator(value) {
        return ['text', 'email', 'password'].includes(value);
      }
    },
    value: {
      type: String,
      required: true
    }
  }
})

new Vue({
  data(){
    return{
      form:{
        username: '',
        email: ''
      }
    }
  }
}).$mount('#app')

Jadi saat kita melakukan inputan pada Username maka akan dicetak expression {{form.username}} dan Email akan dicetak di{{form.email}}, sebagai contoh saya buat seperti tampilan berikut:

Saya kira cukup dalam pembahasan kali ini Cara Menampilkan Value Form Input Dengan Vue JS. Semoga pembahasan kali dapat membantu sahabat semua dalam belajar VueJS, sampai jumpa dilain kesempatan dan seputar pembahasan tentang website.

terima kasih.

Cara Menampilkan Value Form Input Dengan Vue JS

Kategori