Subscribe on changes!

Typescript defineModel() on child component with textarea cannot assign v-model with parent reactive value

avatar
Jan 10th 2024

Vue version

3.4.7

Link to minimal reproduction

https://play.vuejs.org/#eNqFUk1PwzAM/Sshl4I01sNuo5sE0w4gAdPgmEtpvS5bmlSJ2w1V/e846TYG4uOW+D3bz35u+W1VDZsa+JgnLrOyQuYA62oqtCwrY5G1zMKKdWxlTckiokYnaGbK6hAfxv7jK0U3QgudGe2Qla5gE59/GS0hzVA2Et/Zztitu4iuhE7ivid1ow9CWakUgX6MJblspovUgsYxa9tQquuS2IcD/mbj/hFUNNelyUFNBCei4MxjSXxWkQ84OlK1ksVw44ymgVufLnhG+VKBfa5QkmrBqZ9HPJYqZXYPIYa2hsExnq0h2/4Q37i9jwm+sODANiD4CcPUFoA9PH95gj29TyCprxWx/wCX4IyqvcaedlfrnGSf8YLa++CN1MWrm+8RtDsO5YV6Zhf4gpNXfnW/jf4pdzQchTyhO9ri0efvF8NUqgvaP1IZ2nd/AE2qaqATyGElNTx6iy6v6ED+M/4gAgXO1lLlY0acPSmC9MzpUJyaeZ97sC9wuJGv9ncfguj6VA==

Steps to reproduce

  • inspect error on the SFC playground link:

error TS2322: Type 'unknown' is not assignable to type 'string | number | readonly string[]'.

More info on runtime error using typescript compliler: node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:709:5 709 value?: string | ReadonlyArray | number | null; ~~~~~ The expected type comes from property 'value' which is declared here on type 'TextareaHTMLAttributes & ReservedProps & Record<string, unknown>'

What is expected?

No typescript error.

What is actually happening?

It looks like the value of the textarea is not being bound correctly via defineModel. Reactivity works perfectly with the binding, but the error is still thrown.

This approach works on every other html element I've tried (checkbox, text, select, etc)

System Info

No response

Any additional comments?

No response

avatar
Jan 10th 2024

You haven't defined a type for the model, so it's unknown - you should do that, that's why you are using typescript, presumably

defineModel<string>()
avatar
Jan 10th 2024

@LinusBorg - Thank you! That didn't fire on any other definition, so I didn't realize I had to specify it. Appreciate your time!