vue v-forを使用した場合のstyle属性の設定

Question

//Template
<tr>
 <th v-for="title in titles">{{title.name}}</th>
</tr>

/*data  vue-property-decoratorを使用しているため下記のような形になります*/
 titles : any = [
		{
			width:"80%",
			name:"a",
		},
		{
			width:"10%",
			name:"b",
		},
		{
			width:"10%",
			name:"c",
		},
	]

現在上記でnameは問題なくでているのですが、
これに対して、thにwidthの値をstyle="width:80%"などといれたいのですが、
うまくいきません。。

試したコード

<th v-for="title in titles" :style="'height:'+title.width">{{title.name}}</th>

特にエラーはないのですが、実際のhtmlには何も反映されませんでした。。

どのようにしたらstyle属性値に反映可能でしょうか？

Answer 1

公式ドキュメントにもありますが、Vue.jsでstyle属性をつけるには、オブジェクト形式で渡してあげるといいと思います。
Class and Style Bindings — Vue.js

以下のように書くとstyle属性に値が適応されます。

<tr>
  <th
    v-for="title in titles"
    :style="{ height: `${title.width}` }"
  >{{ title.name }}</th>
</tr>

動くサンプルを書きましたので、よろしければ参考にしてください。
CodePen

Comments

[cheche0830]

うわーーーこんな書き方が、、、
ありがとうございます助かりました！！！
あらかじめオブジェクトにしてから渡すほうがよさそうですねでも。。

ありがとうございます！！！

[shgtkshruch]

解決できてよかったです！
Vue.jsは有志の方が公式ドキュメントを日本語に翻訳してくださっているので、
困ったときはこちらを見るようにすると早いかもしれません〜。
https://jp.vuejs.org/v2/guide/index.html