前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/23 12:42