5. Play With Form

tech

Table of Content

• Introduction
• TextBox
• Multiline Textarea
• Radio Input
• Checkbox
• Dropdown

Introduction

Form merupakan tampilan antarmuka yg disediakan oleh HTMl untuk menangani masukan yg diberikan oleh pengguna. VueJS mendukung pengolahan data yg berasal dari form dengan bantuan directive v-model. V-Model merupakan directive yg berfungsi untuk binding data yg berasal dari form.

TextBox

app.js

let app = new Vue({
el: '#app',
data: {
	pesan: '',
}
})

index.html

<div id="app">
    <h2>Hasil : {{ pesan }}</h2>
    <input v-model="pesan" placeholder="Ketik pesan disini">
</div>

Multiline Textarea

app.js

let app = new Vue({
el: '#app',
data: {
	pesan: '',
}
})

index.html

<p style="white-space: pre-line;">{{ pesan }}</p>
<textarea v-model="pesan" cols="30" rows="10"></textarea>

Radio Input

app.js

let app = new Vue({
el: '#app',
data: {
	hasil: '',
}
})

index.html

<div id="app">
    <h2>Hasil : {{ hasil }}</h2>
    <input type="radio" v-model="hasil" value="Nikah Dulu"> Nikah Dulu
    <input type="radio" v-model="hasil" value="Anak Dulu"> Anak Dulu
</div>

Checkbox

Kurang lebih sama dengan radio input, namun variabel kita berikan array kosong.

app.js

let app = new Vue({
el: '#app',
data: {
	hasil: [],
}
})

index.html

<div id="app">
	<h2>Hasil :</h2>
	<ul>
		<li v-for="hs in hasil">{{ hs }}</li>
	</ul>
	<input type="checkbox" v-model="hasil" value="Nikah Dulu"> Nikah Dulu
	<input type="checkbox" v-model="hasil" value="Anak Dulu"> Anak Dulu
</div>

Dropdown

app.js

let app = new Vue({
el: '#app',
data: {
	hasil: '',
}
})

index.html

<div id="app">
    <h2>Hasil : {{ hasil }}</h2>
    <label>Pilih</label>
    <select v-model="hasil">
        <option value="">Pilih</option>
        <option value="Nikah Dulu">Nikah Dulu</option>
        <option value="Anak Dulu">Anak Dulu</option>
    </select>
</div>