How do you customize model directive for a component?

Posted by Jennifer | Updated on

How do you customize model directive for a component?

The v-model directive on a component uses value as the prop and input as the event, but some input types such as checkboxes and radio buttons may need to use the value attribute for a server side value. In this case, it is preferred to customize model directive.

Let’s take an example of checkbox component:

Now you can use v-model on this customized component as below,

The selectFramework property will be passed to the checked prop and same property will be updated when custom checkbox component emits a change event with a new value.


If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers