DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Martin Soderlund Ek
Martin Soderlund Ek

Posted on

IOS Render Component Bug in Vue 3

Recently we had a problem where we toggled a CSS class disabled on a component like this:

<my-button :class="{ disabled: !readyToSubmit }" @click="handleSubmit">Submit</my-button>

The CSS class disabled is toggled depending on the computed property readyToSubmit's boolean value.

The problem was, only a few parts of the button changed on IOS/Safari, where all parts of the button changed on all other devices and browsers.

In short, this means the component wasn't properly re-rendered.

How can we best trigger a re-render in Vue? By adding the built in key special attribute to the component and changing its value.

Simply like this:

<my-button :class="{ disabled: !readyToSubmit }" @click="handleSubmit" :key="`MyBtn-${!readyToSubmit}`">Submit</my-button>

To better help Vue to keep track of what has changed and what hasn't, we supply a key attribute.

More on the key attribute in the Vue documentation

Top comments (0)

Make Your Github Profile Stand Out

Github is great, but have you considered how to make yours more attractive for potential employers or other visitors? Even non-tech ones like recruiters!

Take a couple of hours and show your best side as a person - and a programmer.