Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript.
When using the v-model, the custom component will receive 'value' prop from the parent component. If we also want to pass ':value' to the custom component, we need to use '@Model('change') propName'.
v-model will also received 'change' event for components communcation.
Checkbox:
<template> <div> <input type="checkbox" :id="id" :checked=checked @change="changed"/> {{label}} </div> </template> <script lang="ts"> import Vue from 'vue' import { Component, Prop, Model } from 'vue-property-decorator' @Component export default class MyCheckbox extends Vue { @Prop() label: string @Prop() id: string @Prop() @Model('change') checked: boolean changed(ev) { this.$emit('change', ev.target.checked) } } </script>
Parent Component:
<template> <div> <MyCheckbox :label="checkbox.label" :id="checkbox.id" v-model="checkbox.checked"/> {{JSON.stringify(checkbox)}} </div> </template> <script lang="ts"> import Vue from 'vue' import {Component} from 'vue-property-decorator' import MyCheckbox from './MyCheckBox.vue' @Component({ components: { MyCheckbox } }) export default class HelloTs extends Vue { checkbox = { label: 'Fancy checkbox', id: 'checkbox-id', checked: true } } </script>