Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inconsistent ref handling between dev and build #4431

Closed
jods4 opened this issue Aug 24, 2021 · 3 comments · Fixed by #4492
Closed

Inconsistent ref handling between dev and build #4431

jods4 opened this issue Aug 24, 2021 · 3 comments · Fixed by #4492
Labels
🐞 bug Something isn't working scope: script-setup

Comments

@jods4
Copy link
Contributor

jods4 commented Aug 24, 2021

Version

3.2.4

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgbXNnID0gcmVmKCdIZWxsbyBXb3JsZCEnKVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGgxPnt7IG1zZyB9fTwvaDE+XG4gIDxpbnB1dCB2LW1vZGVsPVwibXNnXCIgcmVmPVwiaW5wdXRcIiAvPlxuICA8YnV0dG9uIEBjbGljaz1cIiRyZWZzLmlucHV0LmZvY3VzKClcIj5cbiAgICBGb2N1cyBpbnB1dFxuICA8L2J1dHRvbj5cbjwvdGVtcGxhdGU+In0=

Steps to reproduce

Inside script-setup, use a ref attribute in template with a non-existant backing field.
To make use of that ref, you can use $refs in an event handler.

The linked repro uses <input ref="input"> and @click="$refs.input.focus()".

What is expected?

Probably should work.
At least should be consistent in dev vs build mode. Ideally consistent with script-classic, too.

What is actually happening?

It works in almost all situations:

  • Always works with classic script;
  • Works with script-setup in dev.

Fails in script-setup when deployed with build.


The reason it fails is because the script-setup codegen is different between dev and build.

In repro, you can see that ref="input" was simply translated to line 20: ref: input.
Except input is a free variable that is not declared.

All other cases have a different codegen that don't require a global variable (and the ref is usable from $refs).

@heeronchang
Copy link

em.. how can i fix this..

@edison1105
Copy link
Member

@heeronchang
as a workaround

<input v-model="msg" ref="'input'" />

@ygj6
Copy link
Member

ygj6 commented Sep 2, 2021

It does not seem to cover other scenes, there are still some problems like: link with other bug.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working scope: script-setup
Projects
None yet
6 participants