vue-scrolltoのモンダイ

vue.js + nuxt.jsで作った このblog（実はつい最近hugoから変更しました）のtagページで タグ一覧からそのセクションへのページ内ジャンプを実現するために vue-schrollto を入れてみた。

もともとのタグ一覧の生成コードはこんな感じ：

<div v-for="tag in tags" :key="tag">
#{{ tag }},
</div>

これを v-scroll-to でジャンプできるように変えてみた：

<template v-for="tag in tags">
  <nuxt-link :key="tag" :v-scroll-to="'\#' + tag + '\''" to>
    #{{ tag }}
  </nuxt-link>
  ,
</template>

よさそうなんだけどこれでは動かないことが判明。 どうもv-scroll-to はbindができない。真にリテラルしか受け付けないようだ。 ということで正解はこうだった。

<template v-for="tag in tags">
  <nuxt-link :key="tag" v-scroll-to="`#${tag}`" to>
    #{{ tag }}
  </nuxt-link>
  ,
</template>

これでスルスル動くようになった。