bodyAttrsでv-bindを追加 Nuxt.js Vue.js

Question

現在Nuxt.jsを使ってフロントを開発中ですが、
ボタンがクリックされるとBodyにstyleを追加して変数を代入しようと考えています。

bodyAttrsを使ってクラスやスタイルを追加することはできましたが、v-bindに関しては追加ができませんでした。

どなたかbodyAttrasを使ってbodyにv-bindを追加する方法を知っている方はいらっしゃいますでしょうか？

具体的にはエラー画面のスクリーンショットをご覧ください。

Answer 1

v-bindはtemplateタグ内(html部分)でのみ有効な記法だったような・・・[要出典]

そもそも定数なら値をバインドする必要がないです。

style: "border: 10px solid #000;"

とすれば良さそうです。

もし値を変化させるのであれば，

style: this.myStyle

などとしておいて，myStyleの値をcomputedやwatchで監視してみてはいかがでしょうか

Comments

[namihana]

template内のみの記法だったのですね！とてもスッキリしました！
ちなみにborderの装飾はテストで入れていただけなので、実際は動的に値を取得するものをいれるつもりでした。
computedやwatchということもとても参考になりましたのでベストアンサーにさせていただきます。
ありがとうございました！