htmlの属性の一部に変数をいれる方法

Question

<a href="/home/ここに変数をいれたい"></a>

ちなみにVueとnuxtを使っているため、vueのバインディングで解決できるのであれば、嬉しいです。
なので実際は以下のような記述です。

<nuxt-link to="/home/ここに変数をいれたい"></nuxt-link>

/home/まで含んだ変数ならできるのですが、一部だけ変数を埋め込むということができません。

簡単な解決作があればぜひお聞きしたいです。

Answer 1

算出プロパティを使うとよいです。

computed: {
    hogeURL: function () {
      return ‘/home/‘ + this.hoge
    }
 }

<a :href=“hogeURL”></a>

Answer 2

nuxt は利用したことがありませんが、通常の Vue.js と同様の文法が使えるなら、
以下のようにバインディングの中でJavaScript の式を利用できます。

入力

<div id="app">
  <a :href="'/hoge/'+varname">リンク</a>
</div>

new Vue({
  el: '#app',
  data:{
    varname: 'fugafuga.html'
  }
})

###出力

<div id="app">
  <a href="/hoge/fugafuga.html">リンク</a>
</div>