✖
Material Design Lite のテキストフィールドと Vue.js の相性があんまりよくない
Material Design Lite のテキストフィールドの input 要素を Vue.js で扱うとき、普通に v-model で two way binding すると、ラベル位置が更新されなくて文字が重なってしまったりする。つまりこれは Vue.js側の更新処理がMDL側に適切に伝わっていないために起こる。
MDLのソースを軽く読んだ解決として、mdl-js-textfield クラスがついている親要素に v-mdl 属性を追加し、以下のようにカスタムディレクティブを定義すると解決する。あんまり美しくないがしかたない。
静的な要素だけなら upgradeElementは必須ではないが、動的になると必須になるためついでにやっている。
Vue.directive('mdl', {
bind: function (el) {
componentHandler.upgradeElement(el);
},
update: function (el, binding, vnode) {
const textfield = el.MaterialTextfield;
if (textfield) {
Vue.nextTick(function () {
textfield.checkDisabled();
textfield.checkValidity();
textfield.checkDirty();
textfield.checkFocus();
});
}
}
});