v-scroll-toを用いた<nuxt-link>の内部リンクが効きません。

Question

目次部分をクリックするとその項までとぶような機能をつくっていますが、うまくいきません。

<nuxt-link v-scroll-to="'#a1'" to>目次1</nuxt-link>

このコードだとしっかり内部の**<h4 id="a1">aaaaaaa</h4>**まで移動します。
しかし、下記のコードですと、全く反応しません。
上記のコード通りに動くことが理想なのですが、どこが悪いのか分かりません。

  <nuxt-link v-scroll-to="'#a${item.id}'" to>

こちらは、関係ありそうな部分を抜粋したコードになります。

<h4 v-for="item in toc_item" :key="item.id">
  <nuxt-link v-scroll-to="'#a${item.id}'" to>
      <p>{{ item.subtitle }}</p>
  </nuxt-link>
</h4>
...
<script>
export default{
     data(){
         return{
      toc_item: [
        {id:'1', subtitle: '概要' },
        {id:'2', subtitle: '基本形' },
        {id:'3', subtitle: '注意点' },
        {id:'4', subtitle: '実践' },
        {id:'5', subtitle: 'サンプル' },
      ]
.....

お手間をかけて、大変恐縮ですが教えていただけると非常にありがたいです。
どうか、よろしくお願いいたします。

Answer 1

<nuxt-link v-scroll-to="'#a${item.id}'" to>
この文字列の囲みがシングルコートになっているということはないでしょうか？
（少なくとも本文上はシングルコートになっているようです。）

文字列中に変数を展開するためにはバックコートを使う必要があります。

<nuxt-link v-scroll-to="`#a${item.id}`" to>

Comments

[ff7575]

おっしゃる通り、シングルコートを使用していました。
文字列に変数を展開するには、シングルコートでなくバックコートを使用するのですね。
大変参考になりました。
親切なご回答ありがとうございました。