vuejs / docs

📄 Documentation for Vue 3
https://vuejs.org
Other
2.9k stars 4.34k forks source link

Update template refs documentation #1650

Open volarname opened 2 years ago

volarname commented 2 years ago

Docs pages https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs https://vuejs.org/guide/essentials/template-refs.html#function-refs

Improvement These pages needs these improvements:

Without these changes its really hard to find out correct types for this.

NataliaTepluhina commented 2 years ago

@volarname could you please elaborate a bit on "add a method example"? The first link has an example of the component method openModal so I am unsure what exactly is lacking there

volarname commented 2 years ago

@volarname thank you for a reply

I just need to see what types are used for function ref. As you have it splitted to two pages it will be great to update both.

maybe I should switch order of links, its more logical to start from 2nd one:

Here https://vuejs.org/guide/essentials/template-refs.html#function-refs I am missing an separate method example of :ref method, every time I try to move it to separate method to look more clear from inline method I get some weird behavior, should/can the method return something? is there any compile magic in template? what type is el? not-inline working version here should be great, and then because you have separate section for TS: And then here https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs I am missing the same method example with types. What type is el parameter? what should/can the method return (void|something)?

This is how i have it right now ant its the only version for me right now where i dont get vue-tsc error:

:ref="(el: any) => { datatables[system] = el }"

it really need to add types and move to own function, but dont know how