Tengo un error extraño que he reducido, pero desafortunadamente no puedo crear un ejemplo reproducible mínimo (¡perdóneme!)
Estoy usando Nuxt.js , Vuetify , Vue.js
Cuando ejecuto el modo de desarrollo, la aplicación funciona.
Pero cuando ejecuto el modo de producción, el siguiente componente hace que la aplicación se congele (todos los botones dejan de responder).
<v-btn nuxt :to="to" color="primary" large v-text="text" /> Cuando reemplazo v-text="text" con {{ text }} como un nodo interno, todo vuelve a funcionar.
Antes (roto)
<v-btn nuxt :to="to" color="primary" large v-text="text" />Después (fijo)
<v-btn nuxt :to="to" color="primary" large>{{ text }}</v-btn> ¿Alguien sabe qué cambiaría en el modo de producción de Vue, o por qué v-text sería el culpable?
No tengo una explicación de por qué funciona en desarrollo pero no en producción, pero eso es irrelevante porque no debe usar v-text en componentes (a menos que ese componente funcione específicamente con v-text ).
v-text simplemente establece la innerText DOM de texto interno en el elemento raíz del componente; estos dos son funcionalmente equivalentes:
<v-btn v-text="text"></v-btn> <v-btn :inner-text.prop="text"></v-btn> La configuración innerText reemplazará todos los nodos secundarios del elemento con un solo nodo de texto, lo que esencialmente romperá la plantilla del componente.
Es mejor configurar el contenido del botón de la manera normal para que el componente pueda ubicarlo en el lugar correcto en la plantilla:
<v-btn>{{ text }}</v-btn>Con respecto a este problema: https://github.com/nuxt/framework/issues/6466#issuecomment-1209742483
Parece que ya que estás usando Nuxt con todo el asunto de SSR/rehidratación + el hecho de que interfiere con el DOM de manera forzada probablemente no ayuda.
Mientras tanto, como se menciona en la otra respuesta: de todos modos, no debería usar esta directiva, apéguese a la sintaxis del bigote .