Vue.js でページ内リンクのリストを動的に作成したい

前提・実現したいこと

vue.js 初心者です。
素の javascript は一応使えます。

勉強も兼ねて web の vue.js で動的にページ内リンクのリストを作成しようとしています。

ページごとに表示しているコンテンツがそれぞれ異なりますが、
ページ内リンクを貼る HTML には全て同じクラスを付与しています。

そのクラスを目印にリンクの表記やアンカーの取得などを vue.js で行い、
ページ内リンクのリストを作成したいです。

発生している問題・エラーメッセージ

vue.js の mounted でアンカーを取得し、
アンカーの id や dataset の値を配列にしてリストに push をしたのですが、
反映されませんでした。

求める実行結果

<ul>
  <li>
    <a href="anchor1">anchorName1</a>
  </li>
  <li>
    <a href="anchor2">anchorName2</a>
  </li>
  ...
</ul>

実際の実行結果

<ul>
  <li>
    <a href></a>
  </li>
  <li>
    <a href></a>
  </li>
  ...
</ul>

上記のことより、

vue.js でできることなのか
できるならどこが間違っていたのか

を知りたく質問させていただきます。
javascript で書いてしまった方が早いような気はしてきてるのですが・・・。

該当のソースコード

HTML
1// ページ内リンクリスト
2<ul>
3  <li v-for="item in list">
4    <a href="{{ item.anchor }}">{{ item.name }}</a>
5  </li>
6</ul>
7
8// アンカー
9<div id="anchor" class="anchor-object" data-name="anchorName">〜</div>

vue
1var vm = new Vue({
2  el: '#app',
3  data: {
4    list: [],
5  },
6  mounted: function() {
7    const self = this;
8    const arr = self.$el.querySelectorAll(".contents-box");
9    for (let i = 0; i < arr.length; i++) {
10      const element = arr[i];
11      self.list.push({"anchor": element.id, "name": element.dataset.name});
12    }
13  }
14});
15

試したこと

vue.js で DOM の直接操作はできないとのことですが、
querySelector 系が機能したのかよく覚えていなかったので、
一度 $refs でも試してみました。

html
1<div id="anchor" class="anchor-object" data-name="anchorName" ref="anchorTarget">〜</div>

vue
1mounted: function() {
2  const element = self.$refs.anchorTarget;
3  self.list.push({"anchor": element.id, "name": element.dataset.name});
4}

先に書いたものも、$refs の場合も
リストにプッシュした後にログを出してみましたが、
この時点では anchor も name も出力されていました。

また、$refsで存在を確認後、直接文字列を指定してみたのですが、それも反映されませんでした。

ネットで思いつく単語で調べてみたものの、解決に至っておりません。

ご教示のほど、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

期待されるコードは以下のような形でしょうか。
Vue.jsでバインディングしたい属性値（hrefなど）はv-bindディレクティブでセットしましょう（データバインディング構文）

html
1<div id="app">
2  <ul>
3    <li v-for="item in list">
4      <a :href="item.id">
5        {{ item.name }}
6      </a>
7    </li>
8  </ul>
9  <div id="id1" data-name="name1" class="contents-box"></div>
10  <div id="id2" data-name="name2" class="contents-box"></div>
11  <div id="id3" data-name="name3" class="contents-box"></div>
12  <div id="id4" data-name="name4" class="contents-box"></div>
13</div>

javascript
1new Vue({
2  el: '#app',
3  data() {
4    return {
5      list:[]
6    }
7  },
8  mounted() {
9    const target = document.querySelectorAll('.contents-box')
10    target.forEach(element => {
11      this.list.push({
12      	id: element.id,
13      	name: element.dataset.name
14      })
15    })
16  }
17})