Subscribe on changes!

dynamic way to use ref to bind children component,and call children method when build

avatar
Jul 29th 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9VEtv4jAQ/iujXAISJMvjlA3somoPPVRarfZGOGTDhKZNbMs2bBHKf++MHV6l5ZTx940/zzOHYKFUtNtikASpxUbVucV5JgDSdbVzBpmPxMBuWEo9y4KKD5WAujI2CyB5xX2HRiJvkCGN5REikxFmPnj9LOqqeCXwORfrGh/41Ds59Mkj9oHEPpI0vogvNYWulIU6FxuSsIbcDdqtIq5qlNQWDqAxL2y1wwH8wXJAxxJaKLVsIKSMw+8nV5efJ6L4QTauImEmMmH3CmEBM3gUxuaiwL8EpIzK0l2j9zJRSGIhH5EfPZIu5r3+CRx/Bk4+A6dX4BHmMhOx5FIcgEuTQDgKXTpk5aMQ2sEVOT6T4xtyciYnN+T0TE49uToHQsRTrlyMvqy9A1+mWBJK3QnR02SPvT1he+LtKdvTTLQXiV20nUR7PgRjdSU2fZjNwamzq6wxquWmx7kO6CnS8ISFghrrq0ahLVkCcgM0kdSdrkmeWzFOzlRcjuBamFUuRK3eotddaJ3vo8q4r3eDH+7R5bcVJM7ie92NCN+e0D7LNfev5Yn1UzoPBoGftGGTq+jFSEHr5vKjlXAEzW/iM2aMpo/PtBrWKpPEsSkLHskXE0m9icmK9FbYqsEITTP8p+V/g5qEs8DVu9OICdyhHmoUa9So72l+cL3RZVlKqaVUjgty55dxOHAvWrrwxf7e32DfB6WlMtSFNZaVwN98Sl2J3Kj4SaGIrrbl2AGeqC+myN0OB069+9VwszJKnN/59aak6Wb7qOYH99zO9h0Dtbpr

Steps to reproduce

just click the number text,the consolog is error

What is expected?

in dev mode

the cRef should be a object

in pro mode

can call exMethod method successful

What is actually happening?

in dev mode

the cRef is a array . I have to check if it is array,and pick the first element to be the true ref refrence.in this way the dev mode can call method named exMethod successful

in pro mode

console.log show that Cannot read properties of undefined (reading 'exMethod')

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM)2 Duo CPU     T7700  @ 2.40GHz
    Memory: 6.43 GB / 16.00 GB
  Binaries:
    Node: 16.15.0 - D:\node\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.5.5 - D:\node\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.71)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.2.36 => 3.2.37

Any additional comments?

No response

avatar
Jul 29th 2022

The use of the way you don't

Ref support array api but do not support the api of objects

you can see the document -> api document

I implemented a demo , you can see the demo

extension

Consider support object api for template-refs ?

avatar
Jul 29th 2022

@cuixiaorui

it must be

const getComponentByName = (name)=> itemRefs.value.find((c)=> c.name === name)

avatar
Aug 1st 2022

@cuixiaorui image

  1. the demo won 't warn in the prod mode,but the method exposeMethd not be called because the componet is undefined
  2. the reason componet is undefined because itemRefs don' t provide the unique key to help us find the current component