Vue.jsで文字列を展開させたい。

Question

Vue.jsでのバインド変数を文字列として、表示させたいのですが、

以下は、bootstrap4でのツールチップにvue.jsの変数の中身を表示させたいのですが、
title="getTBudgetSales"として
getTBudgetSales
というのがそのまま表示されてしまいます。

<td class="align-middle text-right" data-toggle="tooltip" data-placement="top" title="`getTBudgetSales`">@{{ getTBudgetSales | separateDigit3 }}</td>

このような場合、どのように変数を展開すればよいでしょうか？

Answer 1

今の状態では単純に文字列を渡しているだけなので、クラスのバインドと同じ方法で設定可能です。

<td :title="getTBudgetSales">
</td>

詳細は公式のドキュメントを参照してください。
クラスとスタイルのバインディング

Comments

[hrsi_teratail]

バインドにすると、何も表示されなくなってしまいました。。

[nt4c]

getTBudgetSalesがデータオブジェクトではなくメソッドなどに登録した関数なのであれば:title="getTBudgetSales()"としてください。

[hrsi_teratail]

getTBudgetSalesはプロパティなので()を付与するとエラーになります。
:titileでは、メッセージが表示されませんが、
titleでは表示されます。
バインドがうまくいってないのでしょうか？

[nt4c]

getTBudgetSalesの部分を記載いただかないと原因は分かりませんが、通常はデータオブジェクトなどであれば問題なくバインド可能です。
https://jsfiddle.net/x19av82L/

[hrsi_teratail]

HTMLで確認してもどうも、設定されて無いようですね。

<td data-toggle="tooltip" data-placement="top" title="" data-original-title="" class="align-middle text-right">87,963</td>

[nt4c]

getTBudgetSalesの部分を追記していただかないことにはこれ以上の原因は回答側ではつかめませんので可能な範囲で追記されてみてはどうでしょうか。