Subscribe on changes!

onUpdate:modelValue is not being passed to root when modelValue is declared

avatar
Sep 1st 2021

Version

3.2.6

Reproduction link

sfc.vuejs.org/

Steps to reproduce

  1. Try to write something on the input and see if the msg is reactively rendered on h1 (it doesn't).
  2. Go to CustomTextInput.vue, and add v-bind="$attrs" to the text-field, then write at the input. It works.
  3. Remove the bind, and then also remove the modelValue declaration and bind. It works.

What is expected?

It is expected that the handler onUpdate:modelValue always be passed to the root element, since inheritAttrs is true by default.

What is actually happening?

The attr onUpdate:modelValue exists but is not being passed when we declare a modelValue prop

avatar
Sep 1st 2021

You need to remove the prop from custom text input so it doesn't treat it as a v-model value and automatically handle the emit too (similar to having the emit defined https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8aDE+e3sgbXNnIH19PC9oMT5cbiAgPGN1c3RvbS10ZXh0LWlucHV0IHYtbW9kZWw9XCJtc2dcIiAvPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCBDdXN0b21UZXh0SW5wdXQgZnJvbSAnLi9DdXN0b21UZXh0SW5wdXQudnVlJ1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIGNvbXBvbmVudHM6IHtcbiAgICBDdXN0b21UZXh0SW5wdXRcbiAgfSxcbiAgc2V0dXAoKSB7XG4gICAgY29uc3QgbXNnID0gcmVmKCk7XG4gICAgXG4gICAgcmV0dXJuIHtcbiAgICAgIG1zZ1xuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+IiwiVGV4dElucHV0LnZ1ZSI6Ijx0ZW1wbGF0ZT5cblx0PGlucHV0IFxuICAgIEBpbnB1dD1cIiRlbWl0KCd1cGRhdGU6bW9kZWxWYWx1ZScsICRldmVudC50YXJnZXQudmFsdWUpXCIgXG4gICAgOnZhbHVlPVwibW9kZWxWYWx1ZVwiIFxuICAvPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdD5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgcHJvcHM6IHtcbiAgICBtb2RlbFZhbHVlOiBTdHJpbmcsXG4gIH0sXG4gIGVtaXRzOiBbJ3VwZGF0ZTptb2RlbFZhbHVlJ11cbn1cbjwvc2NyaXB0PiIsIkN1c3RvbVRleHRJbnB1dC52dWUiOiI8dGVtcGxhdGU+XG5cdDx0ZXh0LWlucHV0IC8+XG4gIFxuICA8IS0tIElmIGFkZCB2LWJpbmQ9XCIkYXR0cnNcIiBpdCB3b3JrcyAtLT5cbiAgPCEtLSA8dGV4dC1pbnB1dCA6bW9kZWwtdmFsdWU9XCJtb2RlbFZhbHVlXCIgdi1iaW5kPVwiJGF0dHJzXCIgLz4gLS0+XG5cbiAgPCEtLSBJZiB3ZSByZW1vdmUgdGhlIG1vZGVsVmFsdWUsIGl0IHdvcmtzIChhbHNvIHJlbW92aW5nIHRoZSBwcm9wIGRlY2xhcmF0aW9uKSAtLT5cbiAgPCEtLSA8dGV4dC1pbnB1dCAvPiAtLT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQ+XG5pbXBvcnQgVGV4dElucHV0IGZyb20gJy4vVGV4dElucHV0LnZ1ZSdcbiAgXG5leHBvcnQgZGVmYXVsdCB7XG4gIGNvbXBvbmVudHM6IHtcbiAgICBUZXh0SW5wdXRcbiAgfSxcbiAgY3JlYXRlZCgpIHtcbiAgICBjb25zb2xlLmxvZyh0aGlzLiRhdHRycyk7XG4gIH0sXG4gIHByb3BzOiB7XG4gIH1cbn1cbjwvc2NyaXB0PiJ9) see https://v3.vuejs.org/api/options-data.html#emits