v-forのkeyを引数にメソッドを呼ぶ

Question

vueで管理しているdataのkeyの数だけ繰り返し、keyを引数にUserクラスメソッドを呼びたいのですが、うまくいきません。
シンタックスエラーになります。
正しい書き方を教えていただきたいです。

%div{"v-for": "(value,key) in attribute"}
        %tr
          %th
            =User.display_label({{key}})
          %td
            {{value}}

dataObject = {
    attribute: {
      name: "山田"
      age: 19,
      gender: "男",
    }
  }

var vue_model = new Vue({
    el: '#vue-root',
    data: dataObject,
})

Answer 1

問題点

以下の部分に問題があります。

=User.display_label({{key}})

上記のコードは ruby のコードとして解釈されますが、ruby 側に {{key}} という構文は存在しないためエラーになります。
また、 name: "山田" の末尾にカンマがないのも原因の一旦かもしれません。

修正方法

User.display_label の使用を諦めて、js側にラベル用のデータを持たせてください。

%div{"v-for": "(value,key) in attribute"}
        %tr
          %th
-           =User.display_label({{key}})
+           {{labels[key]}}
          %td
            {{value}}

dataObject = {
    attribute: {
-     name: "山田"
+     name: "山田",
      age: 19,
      gender: "男",
-   }
+   },
+   labels: {
+     name: "名前",
+     age: "年齢",
+     gender: "性別",
+   }
  }

var vue_model = new Vue({
    el: '#vue-root',
    data: dataObject,
})