Support value prop and data in the blur event

[kerbo]

A common usage pattern is to not use v-model but instead populate the field using :value. The value is then saved to store using the blur event.

My request is to:

Please add the value prop.

Please add the same data passed by the Change event to the Blur event.

[phoenixwong]

First of all, in Vue v2.x, the v-model is the short-hand of :value --

// Using `v-model`
<custom-component v-model="yourVar"></custom-component>

// Equals the following
<custom-component :value="yourVar" @input="yourVar = $event"></custom-component>

Documentation: https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

So there's no need to "add the value prop".

---

Please add the same data passed by the Change event to the Blur event

This one is workable. I'll make it an enhancement.

[kerbo]

Using v-model means I'm binding to a variable and that variable is being being updated by the input event. I do not want this. My intention is to use the blur event save the data elsewhere.

As I said, not using v-model is a common usage pattern and for every other component I use, the value prop is directly supported.

[phoenixwong]

As mentioned in my last comment, v-model is just a syntactic sugar of a combination of :value and @input. All custom components (E.g., Vue2 Timepicker) support v-model support :value naturally.

That's what I meant by saying there's no need to "add the value prop".

<!-- It works in any existing Vue2 Timepicker version-->
<vue-timepicker :value="yourVar"></vue-timepicker>

Check JSFiddle Demo here

---

UPDATE: The Lazy Event Mode may be what you are looking for -- it makes sure both input and change event fires when

• A. Value did change by the end-user, and
• B. The Timepicker on blur.

<vue-timepicker lazy></vue-timepicker>

Documentation here