Vue in production breaks app when using v-text in button

user_1166285 0
Viewed 42

I have a strange bug that I've narrowed down, but unfortunately can't create a minimal reproducible example (forgive me!)

I'm using Nuxt.js, Vuetify, Vue.js

When I run in development mode, the app works.

But when I run in production mode, the following component causes the app to freeze (all buttons become unresponsive).

<v-btn nuxt :to="to" color="primary" large v-text="text" />

When I replace v-text="text" with {{ text }} as an inner node, everything begins to work again.

Before (broken)

<v-btn nuxt :to="to" color="primary" large v-text="text" />

After (fixed)

<v-btn nuxt :to="to" color="primary" large>{{ text }}</v-btn>

Does anyone know what would change in Vue production mode, or why v-text would be the culprit?

nuxt.js vuetify.js vue.js javascript
2 Answers

I don't have an explanation why it works in development but not production, but that's irrelevant because you shouldn't use v-text on components (unless that component specifically works with v-text).

v-text simply sets the innerText DOM property on the root element of the component; these two are functionally equivalent:

<v-btn v-text="text"></v-btn>
<v-btn :inner-text.prop="text"></v-btn>

Setting innerText will replace all child nodes of the element with a single text node, essentially breaking the component's template.

It's better to set the button content the normal way so the component can slot it in the correct place in the template:

<v-btn>{{ text }}</v-btn>
user_7340400
user_88165850
Related