v-model.lazy in custom component with moment instance as value does not sync when component emits 'change'

[radisb]

Version

2.3.3

Reproduction link

https://jsfiddle.net/xnyhfL9h/

Steps to reproduce

Create a custom component , accept a moment instance through a prop, clone it, modify the clone and emit the modified clone using a 'change' event. If the data has been bound to the parent through v-model.lazy, the parent's data does not update. However if it is bound with separate :value and @change , then it updates correctly.

What is expected?

The parent's value should be updated

What is actually happening?

Nothing. Parent bound data does not get updated

[posva]

v-model in components is just sugar syntax, it doesn't support modifiers. Using a change or input event doesn't change anything in components. You can actually use that if you prefer: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

[tmorehouse]

@posva after some simple testing, I discovered that v-model.number and v-model.trim both appear to work with custom input components, while v-model.lazy doesn't.

After inspecting the component's root element, I do see a _vModifiers property which lists the modifiers if they are present (i.e. ._vModifiers = { lazy: true }. But when inspecting the vm.$el, this property doesn't appear.

It would be nice to be able to check within the component if this modifier is set on v-model, and then one could change which event is being $emited or change when input is fired.

I suppose one could create their own lazy prop on the component, but it would be nice to have the option to detect the .lazy modifier, so that the custom input would work like a standard input.

[SzNagyMisu]

It would be nice to have a possibility to have v-model.lazy on custom components. Something configurable like

export default {
  model: { lazyEvent: 'my-custom-lazy-event' } // defaulting to 'change'
}

@posva ? Is it daydreaming 😎 ?

[tex0l]

The way I worked around that is by defining two methods:

  methods: {
    onInput (e) {
      if (!this.modelModifiers.lazy) this.$emit('update:modelValue', e.target.value)
    },
    onChange (e) {
      if (this.modelModifiers.lazy) this.$emit('update:modelValue', e.target.value)
    }
  },

and instead of having $emit('update:modelValue', $event.target.value) binded to the @input (non-lazy) or to the @change (lazy) I bind both: @change="onChange" @input="onInput".

Full minimal example:

<template>
  <div>
    <label :for="$attrs['name']">
      <slot />
    </label>
    <div>
      <input v-bind="$attrs" :value="modelValue" @change="onChange" @input="onInput">
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextInput',
  inheritAttrs: false,
  props: ['modelValue', 'modelModifiers'],
  emits: ['update:modelValue'],
  methods: {
    onInput (e) {
      if (!this.modelModifiers.lazy) this.$emit('update:modelValue', e.target.value)
    },
    onChange (e) {
      if (this.modelModifiers.lazy) this.$emit('update:modelValue', e.target.value)
    }
  },
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>