Renaming of template refs is not reflected in the template
ushironoko opened this issue · comments
ushironoko commented
Overview
This plugin seems to intentionally correct variable names in the ref object if they are covered by key names of other objects.
example:
<script setup>
const listeners = computed(() => ({ input: handleInput, }))
const input = ref(null); // renamed to input2
</script>
However, the variable name modification is not done on the template side, so the ties are broken.
<script setup>
const listeners = computed(() => ({ input: handleInput, }))
const input = ref(null); // renamed to input2
</script>
<template>
<!-- not renamed -->
<input ref="input" v-on="listeners"">
</template>
This does not seem to happen in Vue3 (variable names are not modified).
Expected behavior
As with Vue3, no intentional variable name modification is performed. However, I am not aware of how this feature was implemented so I am missing that consideration. Thanks.
Sample
Reproducible code can be found below.
https://github.com/ushironoko/unplugin-vue2-script-setup-not-renamed-template-ref
deps:
"dependencies": {
"vue": "^2.6.12"
},
"devDependencies": {
"@vue/composition-api": "1.4.6",
"@vue/runtime-dom": "^3.2.33",
"typescript": "^4.5.4",
"unplugin-vue2-script-setup": "0.10.2",
"vite": "^2.9.2",
"vite-plugin-vue2": "1.9.3",
"vue-template-compiler": "2.6.14"
}