Nuxt.js Vue.js で列名のstringを渡して、変数を参照したい

Question

前提・実現したいこと

フロントエンドNuxt.jsで開発しています。
Viewをコンポーネントとして切り分けして
呼びもとで列名を引き渡し、
その列名を使って項目を参照したいです。

以下の様なテンプレートを
例えば項目名

price
count
name
cost

...

といった列名を渡しして描画したいのです。

<template>
  <tr >
    <th >
      項目名
    </th>
    <td>
      前年
    </td>
    <td v-for="(v, k) in hoge" >
      {{v.lastyear.{変数}}}
    </td>
  </tr>
  <tr>
    <td>
      今年
    </td>
    <td v-for="(v, k) in hoge" >
      {{v.currentYear.{変数}}
    </td>
  </tr>
  <tr>
    <td>
      比率
    </td>
    <td v-for="(v, k) in hoge" >
      {{v.rate.{変数}}
    </td>
  </tr>

</template>

↑は
例えば{変数}にpriceを代入した場合
v.lastyear.price
v.currentYear.price
v.rate.price
を描画しようとしています。

こういった変数代入みたいなことはSmartyなどではできたと思うのですが、
Nuxt.jsはできるのでしょうか？

Answer 1

v.lastyear[変数名]でいけませんかね？

Comments

[ms5025]

確かに！
いけました。classだから配列みたいな使い方できないと思っていました。
ありがとうございます！