Sekarang kita akan belajar bagaimana membuat component model di Vue. Sebelumnya kita telah belajar cara membuat component event. Ternyata kita juga bisa menambahkan component model. Dengan fitur ini kita bisa menggunakan directive v-model pada component yang kita buat. Jika sedikit lupa, teman-teman bisa lihat cara menggunakan v-model di sini.
Cara Membuat
Oke, langsung saja kita mulai dengan cara membuat component model. Cara mirip dengan cara kita menambahkan component properties maupun component event, yaitu dengan fungsi defineModel. Fungsi ini bisa digunakan tanpa menggunakan parameter lo. Yuk, kita lihat contoh berikut ini.
<script setup lang="ts">
const model = defineModel();
</script>
<template>
<h2>Input</h2>
<input type="text" id="name" v-model="model.name"/><br/>
<input type="text" id="age" v-model="model.age"/><br/>
<h2>Preview</h2>
Name: {{model.name}}<br/>
Age: {{model.age}}<br/>
</template>
<style scoped></style>Pada contoh di atas, kita hanta menambahkan const model = defineModel(), dan itu sudah bisa digunakan. Cara menggunakannya kita harus menambahkan v-model pada input dalam templatenya. Sebenarnya, lebih disarankan kalau kita menambahkan parameter type: Object pada defineModel supaya lebih jelas. Jika ingin menambahkan parameter tersebut kita bisa gunakan cara berikut ini.
<script setup lang="ts">
const model = defineModel({
type: Object
});
</script>Berikut cara menggunakan component tersebut di main component
<script setup lang="ts">
import ModelComponent from "./ModelComponent.vue";
import {reactive} from "vue";
const person = reactive({
name: "Ardhan",
age: 20
})
</script>
<template>
<ModelComponent v-model="person"/>
</template>
<style scoped></style>Di main component jangan lupa untuk membuat reactive ya, karena yang digunakan sebagai parameter v-model adalah object. Berikut ini tampilan dari component di atas
Setiap kali kita merubah input, previewnya juga akan berubah.
Multiple Component Model di Vue
Pada materinya sebelumnya tentang event, ternyata kita bisa menambahkan lebih dari satu event pada sebuah component. Apakah kita bisa menambahkan beberapa model dalam satu component? jawabnya bisa, tapi caranya berbeda dengan event. Untuk menambahkan lebih dari model, kita harus membuat konstanta satu per satu untuk setiap model yang akan ditambahkan. Untuk lebih jelasnya perhatikan contoh berikut ini.
<script setup lang="ts">
const name = defineModel("name", {
type: String
});
const age = defineModel("age", {
type: Number
})
</script>
<template>
<h2>Input</h2>
<input type="text" id="name" v-model="name"/><br/>
<input type="text" id="age" v-model="age"/><br/>
<h2>Preview</h2>
Name: {{name}}<br/>
Age: {{age}}<br/>
</template>
<style scoped></style>Pada contoh di atas kita membuat 2 model yaitu name dan age. Masing-masing harus kita buat defineModel ya. Karena keduanya tidak bertipe object, maka di v-model templatenya kita bisa memanggilnya secara langsung menggunakan nama modelnya. Cara untuk menggunakan di main component juga agak berbeda. Berikut ini contohnya
<script setup lang="ts">
import ModelComponent from "./ModelComponent.vue";
import {ref} from "vue";
const name = ref("Ardhan");
const age = ref(20);
</script>
<template>
<ModelComponent v-model:name="name" v-model:age="age"/>
</template>
<style scoped>
</style>Jadi sekarang kita tidak menggunakan reactive karena tipe datanya bukan object. Pada pemanggilan component yang sebelumnya menggunakan v-model=”” kita ubah menjadi v-model:nama_model=, contohnya adalah v-model:name=”name” dan v-model:age=”age”. Nah, jika kita jalankan, sebenarnya hasilnya sama saja dengan sebelumnya.
Penutup
Nah, demikianlah cara menggunakan component model di Vue JS. Jika teman-teman masih kurang jelas dengan apa yang barusan aku jelaskan, teman-teman dapat melihat dokumentasi resmi Vue. Selamat belajar, semoga tulisan ini bermanfaat untuk kita semua.
