[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

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" :/> {{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" :/>

        {{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>