Subscribe on changes!

v-model and @update:modalValue all use

avatar
Nov 14th 2022

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eNp9U9tq20AQ/ZVlKZECtkST9sWxjUtpoS+lD6Uv3UIUa6yo1V7YXSktQv/e2VlFthUTg8XO9czlTM8/GJN1LfAVX7u9rY1nDnxrtkLV0mjr2Xf4678o03p2sFqyJMsnTQhMhJpce2bhsMBPsfd1B2wYQ6IbY0LttXKYqIamZJvJMe2DVRUSViwh41d8J4ug7YqmDWqnJYyBpArW4TqAx5yPhSo/4qcCTJxes82WUdYSHtqqAhvewVM3kDW6SpO3N7cJxg9CrfPYOfaMggdpmsIDSoyty7qjB2OfCftHLKfvYy0Z1cKGgaWtq1XFrhp/V9O0/D8DG8E9Dkvwq8rfIVjIc5IShQu+rFtKXUKDihMM1D8Hjb9da0qsc0XOVBdGHMcgeL4NIyeYPICGFzVFUuh76pUveNzhUhYm++20QkLQ/MRocIJj2zGd4LjRICOe98at8rxV5k+V7bXMd2jLbat8LWFZarm7zW6yd+8R0/lTfQZOLh+sfnJgEVFwWveYPEdlB3ZpQZVgcXuvgc18zwBnthegARMpMOAAzmh94R4iz4zVxiHFSjjUCr4FKdL3uAac0zBjJ8jaT0GfUHDpz+TF/pJfFHJ+TU+F3z/OTikmjdwLZ3RIqazsmIoSUWhKbgsW0aa7OL2F+6n11eh2UlSIEPxNHw2D4PdE5NBReqGFZ6BwWvh/7baI+6j3wp8dQFQdr2Dkf4jJZ7Qd/gPxA6Md

Steps to reproduce

image Look at the picture above. Using v-model and @update:modelValue at the same time, the compiled "on: update: modelValue" will not be executed

What is expected?

image Look at the picture above. It should be compiled into an array like version 3.0.5, and called sequentially

What is actually happening?

@update:modelValue not be executed

System Info

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz
    Memory: 15.79 GB / 31.72 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.35)
    Internet Explorer: 11.0.19041.1566

Any additional comments?

No response

avatar
Nov 14th 2022

I think it's not a bug. For input element, we should use @input to handle the event. Even if there's no v-model, @update:modalValue also doesn't work for input element.

avatar
Nov 14th 2022

I think it's not a bug. For input element, we should use @input to handle the event. It was originally possible to use this writing method at the same time. Later, after upgrading the new version, I found that the function was not supported. Because it was not supported, I changed to the change of watch value. However, I think it was originally supported, but now it is not supported. It should be prompted in the document.

avatar
Nov 14th 2022

Which version do you mean will work?

avatar
Nov 14th 2022

3.0.5

avatar
Nov 14th 2022

image

avatar
Nov 16th 2022

1.should be modelValue is not modalValue 2.For input element, we should use @input to handle the event. 3.For custom components we should use @update:modelValue to handle the event. please see https://cn.vuejs.org/guide/components/events.html#usage-with-v-model

avatar
Nov 16th 2022

1.should be modelValue is not modalValue 2.For input element, we should use @input to handle the event.please see https://cn.vuejs.org/guide/components/events.html#usage-with-v-model

Yes, I wrote the sample incorrectly, but my actual project also wrote modelValue,

avatar
Nov 16th 2022

1.should be modelValue is not modalValue 2.For input element, we should use @input to handle the event.please see https://cn.vuejs.org/guide/components/events.html#usage-with-v-model

Yes, I wrote the sample incorrectly, but my actual project also wrote modelValue,

please see https://cn.vuejs.org/guide/components/events.html#usage-with-v-model image

avatar
Nov 16th 2022

The docs is only meant to illustrate how v-model is compiled internally, it's not meant to be a public API. Maybe we should make it clear in the docs.

Either way, there is no reason to be writing @update:modelValue manually on <input> element, either use @input or @change.

avatar
Nov 16th 2022

thanks