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.
Top comments (0)