Nuxt.jsでidを埋め込みで設定したい。

Question

Nuxt.jsで小規模なWebサイトをつくっています。
以下は、目次を表示するコンポーネントの一部コードです。
見ていただきたい部分は、<nuxt-link to="#${item.id}">です。
v-forで生成した目次リストで、
各項目をクリックしたらhtml上に<p id="1">,<p id="2">のように設定した箇所まで移動して欲しいのですが、idの埋め込み方法がわかりません。#${item.id}はわからないために書いた暫定的なものなので確実に違うことはわかっています。

お時間をとらせて申し訳ないのですが、教えていただけないのでしょうか。

<template>
    <div>
      <div class="toc-btn" @click="tocOpen">
        目次
      </div>
        <div v-show="tocflag">
          <div class="toc-behind" @click="tocOpen" />
          <div class="toc-contents">
                <h4 v-for="item in toc_item" v-bind:key="item.id">
                    <nuxt-link to="#${item.id}"><p class="toc-item">{{ item.subtitle }}</p></nuxt-link>
                </h4>
          </div>
        </div>
    </div>
</template>

Answer 1

<nuxt-link :to="`${item.id}`">

こちらでいかがでしょうか？

item.idのように動的な値を使いたい場合は、
toの前に:(コロン)が必要です。

また、${}を使いたい場合は``(バッククォート)で囲む必要があります。

Comments

[ff7575]

本当に助かりました。
①動的な値を使う場合には、:to
②${}を使う場合には、''で囲む
教えていただいたことを無駄にならぬよう頑張ります。
丁寧でご親切な回答ありがとうございました。

[mizzsugar0425]

お力添えできてよかったです！