Vue.js の style 属性 を 動的に変更する
Vue.js で table の tr タグ の style 属性を変更しようとしたら、VueCompilerError: Element is missing end tag.」というエラーが出てしまい困った。
このエラー自体は、trの閉じタグまで含めてないから怒られたわけだけど、trの閉じタグということは間にたくさんtdタグがあるわけで、閉じタグまで含めたら結構大きくtemplateでくくったりしなければならず、コードが重複するしそれは避けたい。
styleの値を関数の戻り値とかにできれば動的に変更できるのになぁ、なんて思って調べた。
style属性の値を動的に変更する
いろいろ調べたがいっぺんにはできなかった。例えばbackgroundの値1個を変更するなら、以下の方法でできた。
<template v-for="(data, index) in this.dataList">
<tr :style="{ backgroundColor: this.changeBackgroundColor(index) }">
しかし、widthとかheightも変えたい、とかし始めるとその数だけカンマで追加して関数が必要となってしまう。
<template v-for="(data, index) in this.dataList">
<tr :style="{ backgroundColor: this.changeBackgroundColor(index), width: this.getWidth(index), height: this.getHeight(index) }">
みたいな感じで。
これはさすがに面倒。
なのでいちいち小分けにせず、"{" から始まる全文字列を返却する関数にすればいんじゃね？とやってみたらそれはエラーになった。
理不尽。
以上。