Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
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.
[00:00] Here we have an empty my checkbox component, which we will call later. For now, let's import it in app component. Then we need to add it to the component property of the decorator, so then we can use it. Now, let's create a checkbox object.
[00:20] We will have a title to show in the checkbox, a value, which should be a unique identifier, and a checked property. These will be the properties to pass to the component. Let's go up to the template, and use my checkbox component.
[00:45] We are going to write a title property, and use the Vue model for the checked property of the checkbox. That way, it will be bound. Now that we have set this here, let's go to my checkbox component, and write here a basic input for a checkbox. We will print the title besides.
[01:07] Now, we have to take the properties. By using the property decorator, let's take the title and a value property. We didn't pass any value property, but Vue model creates it for accessing its value. Let's use it in the checked property of the input.
[01:27] If we ran it, we see that the property, it seems to be passed down as the checkbox is checked. When we toggle it, we see in the Vue developer tools that the checked property doesn't change. That's because we're still emitting from the parent component that the property is changing.
[01:45] For that, let's listen to the change event of the input. In there, we need to emit an input event passing the check value that we take from the event itself. Vue model implicitly listens to the input event, and will update the checked value.
[02:05] Let's run this again. Now, if we toggle the checkbox, we see the checked property is changing, so this is working. In some cases, you may find the problem with Vue model. This is one of them. If we go back to the app component, we have a value property that we are going to pass down.
[02:25] Vue model implicitly sets a value property and listens to an input event. We need to change that. Let's pass our value property here. Then in my checkbox component, we can use the model decorator to tell Vue which property and event to use.
[02:43] In this line, we are saying use the change and the checked property, which is a Boolean. Now, we can replace the input for the change event. Don't forget to use the property decorator as well before the model, because checked is a property. If we don't do it, it will not be considered as so.
[03:05] Now, we can change the checked property to use the new name, and write the value property that we are passing. Let's run this one more time. Now, we'll see the checked property is working back again. If we inspect the HTML element, we see the value property is being passed correctly.