When an element is hidden and shown using Vue, some MDL styles may disappear. Take a look at this example on CodePen: https://codepen.io/anon/pen/RBojxP
HTML:
<!-- MDL -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- Vue (latest stable) -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2157544461130f140f1017">[email protected]</a>/dist/vue.js"></script>
<div id="main">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<!-- Slider -->
<div v-if="showSlider" id="sliderContainer">
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="0" tabindex="0">
</div>
<button @click="showSlider = !showSlider" class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">
Toggle Slider
</button>
</div>
<div class="mdl-cell mdl-cell--6-col">
<!-- Switch -->
<label v-if="showSwitch" class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"></span>
</label>
<button @click="showSwitch = !showSwitch" class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">
Toggle Switch
</button>
</div>
</div>
</div>
JS:
var app = new Vue({
el: '#main',
data: {
showSlider: true,
showSwitch: true
}
})
Try toggling the buttons a few times and note the changes in styles. It's uncertain whether this issue is related to Vue or MDL. It seems to affect sliders and switches, but it's unclear if it applies to all MDL components.