Tengo la siguiente vista en Vue:
<script setup> import Overwrite from "../components/Overwrite.vue"; </script> <template> <div> ... <textarea v-model="text" cols="99" rows="20"></textarea> ... </div> </template> <script> export default { data() { return { text: "" }; }, components: { Overwrite: Overwrite }, }; </script> Todo funciona perfectamente bien cuando inicio la aplicación con npm run dev .
Sin embargo, cuando construyo la aplicación para producción y la ejecuto, recibo el siguiente error tan pronto como escribo algo en el área de texto:
index.57b77955.js:3 Uncaught ReferenceError: text is not defined at HTMLTextAreaElement.t.onUpdate:modelValue.s.<computed>.s.<computed> [as _assign] (index.57b77955.js:3:1772) at HTMLTextAreaElement.<anonymous> (vendor.31761432.js:1:53163)También tengo otros elementos de formulario que muestran exactamente el mismo comportamiento.
Puede usar un máximo de 1 × etiqueta <script> y un máximo de 1 × <script setup> por componente vue.
Sus salidas se combinarán y el objeto resultante de la combinación de sus exportaciones implícitas o explícitas estará disponible en <template> .
Pero no están conectados. Lo que significa: no espere que ninguna de las dos etiquetas de script tenga visibilidad sobre las import del otro.
La peor parte es que, aunque el primer <script setup> declara Ovewrite cuando lo importas (por lo que debería poder usarse en <template> ), el segundo lo sobrescribe cuando usas components: { Overwrite: Overwrite } , porque Overwrite no está definido en el segundo script. Entonces su declaración de components es equivalente a:
components: { Overwrite: undefined } , que sobrescribe el valor ya declarado por <script setup> .
Esto te da dos posibles soluciones:
Solución A:
<script> import Overwrite from "../components/Overwrite.vue"; export default { components: { Overwrite }, // you don't need `data` (which is Options API). use `setup` instead setup: () => ({ text: ref('') }) } </script>Solución B:
<script setup> import Overwrite from "../components/Overwrite.vue"; const text = ref('') </script>O incluso:
<script setup> import Overwrite from "../components/Overwrite.vue"; </script> <script> export default { data: () => ({ text: "" }) }; </script>¿Puedes intentar usar solo la etiqueta del script de configuración? Usarlo solo para importaciones de esta manera no tiene sentido. Si importa un componente en las etiquetas de script de configuración, no necesita configurar components tal vez el problema esté relacionado con eso.
También puede probar la configuración completa entonces:
<script setup> import { ref } from 'vue' import Overwrite from "../components/Overwrite.vue"; const text = ref('') </script> <template> <div> ... <textarea v-model="text" cols="99" rows="20"></textarea> ... </div> </template>