feat(v-model): add lazy modifier for v-model on components(close #6914)

[javoski]

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

Other information:
close #6914 .

[rstoenescu]

Any news on this? Is it going to get merged, and if so, when is it scheduled to get into an official release? Thanks.

[posva]

@javoski I think adding this feature should allow both using v-model and v-model.lazy, and therefore, a component could potentially have 2 different events for model

---

removed bad snippet of code, @javoski template solution is better

or with a render function as well http://jsfiddle.net/dazvtwat/

I do agree to have .lazy makes it more succinct though 🙂

[javoski]

@posva Yeah, it's reasonable for components to aware of if they are using .lazy modifier on v-model, and prop is a proper way.
But in the case of single input element wrapper component, I prefer to do like this:

const MyComp = {
  ...
  template: `<input :value="value" @input="onUpdate" @change="onUpdate">`,
  methods: {
    onUpdate (e) {
      this.$emit(e.type, e.target.value)
    }
  }
}

[posva]

That's much better, indeed, completely forgot about event.type 😄
But we should allow the user to customize both, input and change events name emitted by the component because the component can be used in both scenarios but only one event name can be provided, and if it is provided, it will end up used by both v-model.lazy and v-model

[tmorehouse]

It would be nice for a component to actually know if the v-model is requesting a lazy (in some cases this may be required).

Native inputs will have element._vModifiers set with an object defining what modifiers are in use (i.e. { lazy: true, trim: true }, while the root element of a component will have this.$el.vModifiers set to an empty object, regardless of modifiers in use. It would be very handy to have these values made available to components (or maybe exposed as a readonly this.$vModifiers injection, although the former would be easier to implement)

[PhilipJohnBasile]

Looks good. 👍

[Tantawi]

@javoski Can you please look at the merge conflicts and try to get this merged? thanks a lot!

[asennoussi]

@PhilipJohnBasile Please mege? :3

[Tantawi]

@javoski Awesome now that it is approved, can you please look at the conflicts and merge? thanks a lot!

[PhilipJohnBasile]

There's merge conflics @Tantawi

[cn-xufei]

Exciting. When can we merge?

[javoski]

This PR was too old, so I opened a new one based on the latest codebase. #11830.