Assigned model value is not available in line below

[louisiukas]

Vue version

3.5.16

Link to minimal reproduction

https://play.vuejs.org/#eNqtVNtum0AQ/ZURimRHcaDOpQ8OsZpEeWiltlFatS9INYHB3mTZRbuL4wjx750FjMFxmlQKL8DMmbNzOTuFc5Fl7jJHZ+L4OlIsM6DR5BnwUMzPA8fowJkGAuhhaSaVgQIUJlBComQKAwodnPX8V5LeAoVpEK7XWuxBgzOLrSMiKTSdJ1O8xWQM55bZF3l6h2o63G9oe6CjHSDfqxOnNH2DacZDg03K/iYZwwxHKuh6FRIEYTyCR2YWsDxMZYw8cNZfE3vUV/v1K+S5DVknSBjvdeKjhpjSpIAX2Y7exnY8AiEhUzJr8L7XqdEZ0YCoQQmbu/daCppiYSkDJyJGxlF9zwyjBgbOBCqP9YWcy8cvlc2oHEdre7TA6GGH/V6vrC1wbhRqVEsMnNZnQjVHU7uvf3zDFX23Tupnzgn9D+ctaslzm2MNu8xFTGl3cFW2nyttMTH/qa9XBoVeF2UTtciywgcOKcw286XSN+keuydVXCBK6mJPou9wF2rR2rFpUmyMCRN4Y//8oprwBLRRVE650TlHA4zA4w/PhL/RT0tWmdprMOijBiMoCBbm3EyIr+xfJS6jsGXbvkw1MMlFZJsHi9CO44qz6GG4v25j1YCDg4Z0TSw5ulzOh7PhXlEV7laVlvtwiYlUCEt75AT2in6ybmUvZ+skX+e70JrNBXWvpiRG1g/fdQDVytr67ON58HuBAnJtmWa7YmawQEqcGUjDJ5oY45w6srQWDZLH9fnum/NODKr/acNmUm0Nu4KaCJJyZxXuWIYxW0LEQ61Jy1Go4lbNlXdxMi2Kev9AWfoe/Xe8d7kxpIdPkZUCxXeEQTTVu2qW79XIbmymcPrCSOjELYHbo23AVnxPtBTV+e9H+B6Vub0n6VebJyqMlmWGcQN1bRO6ok5pOzBhr0y26owhC+OYNDKB0575TqoYFaGzFRXBWQxzFT49AxyqMGa57kbXk7IJ1Tv8zxKV3Wi0eI7dU3f80Sn/Ai6dfKQ=

Steps to reproduce

Make two components, parent & child. In the child component, use defineModel to define someModelValue. In the parent component use the child component and define a ref (called someRef). The ref is used in the parent on the v-model directive on the child component v-mode:someModelValue="someRef". In a function in the child component, update modelValue.value and, in the next line, read it out.

What is expected?

It is expected that when you assign a value to someModelValue.value you can immediately read out this value again in any expressions below in the same code block.

What is actually happening?

When someModelValue.value is used in a line immediately below the assignment it still retains its previous value.

System Info

Any additional comments?

As you see in the example, it only fails if v-model is used.

[skirtles-code]

I believe this is working correctly, even if it's not what you were expecting.

The value of a model's ref will reflect the current value of the prop. Assigning a new value will not immediately update the prop, it needs to wait for re-rendering. You can use nextTick to wait for that.

You can read more about this at https://vue-land.github.io/faq/emit-synchronous.

The new value assigned to a model can be rejected, or altered, by the parent. In general, Vue can't assume that the new value will eventually become the prop's value.

[louisiukas]

Thanks for the explanation. I admit to having missed that doc.

The use of defineModel is nice syntactic sugar, but it comes comes with an extra devil-in-the-detail.

There is just one thing:

I agree with what you said that we cannot expect to know the value of the prop synchronously right after the model value is set. The assignment is essentially an emit. So when we are using the model value in an expression below, it can either evaluate to the "old value" or the "new value" that was just set above.

Both values may be equally invalid after the parent has dealt with it through an update hander. However, it seems that the newly assigned value is still more relevant than the old value for the remainder of the code block, because it was just assigned to the variable at hand. This would probably be the more natural expectation.

Alternatively, Vue could throw a warning when using the model value after the assignment.

I understand that we cannot run the parent emit handler to evaluate the real prop value, it just seems like the newly set value is more correct than the previous value.

Thanks