Vue.jsで同一ページでパラメーターが変更されたことを検知する
ページ内でタブを使用している。 タブの内容に対してパラメータを用いて直接アクセスしたいという依頼を受けた。 例）http://hogehoge.com/list?tab=2 仕様： ・例のようにURLにタブを指定するNo（タブの幾つめか）が含まれていればそのアクセス時にそのタブを表示 ・タブ遷移時にはURLパラメータを更新してユーザーがパラメータ付きURLをコピーできるようにする —& […]
Vue.js
1/2ページ
Vue.jsでアクセス元（referrer）を取得する
リファラーのデータを集め用とした際に、document.referrerを使っても前のページが取得出来なかった。 $routeを使っているとdocument.referrerで接続元が取れないらしい。 下記のようにbeforeRouteEnterを用いることで、接続元を取得することが出来た。 data() { return { prevRoute: null }; }, beforeRouteEn […]
Vue.jsで複数のclassを条件に合わせてつける
- 2021.01.14
- クラスバインディング
Vue.jsではクラスバインディングする際にclassを使用する。 条件に合わせて「フラグが立っていればクラスをつける」「変数をクラス名として入れる」事ができる。 複数の指定を使用する際の書き方を調べたのでメモ。 ◆変数をそのままクラス名に使用 変数classNameに値が入っていれば、それを追加。 例）className = hogehoge; <div class="desig […]
Vue.jsで作成したサイトで個別のページタイトルを設定する
案件詳細ページなど、ページ毎に個別のタイトルが必要なページで使用。 titleやmetaといった情報を設定（書き換える）ことが出来る １、vue-headを追加 ◯yarnでのインストール yarn add vue-head ◯npmでのインストール npm install vue-head –save ２、main.jsへの記述追加 // Vue.head import VueHea […]
vue.jsで取得したhtmlタグを表示
- 2020.10.14
- htmlタグ
vue.jsでAPIで文字列を取得した。 その際、APIから渡された配列にはaタグが入っているのに、出力するとタグは表示されるがタグが文字列として出力され、リンクが機能しなかった。 APIから取得した配列からコメント部分を下記のように表示していた。 <div class="message">{{ this.notice.content }}</div> […]
Vue.jsでのCookieの使用
- 2020.08.18
- Cookie
Cookieで制御して閉じるボタンをクリックするまで要素を表示するで、基本的なCookieの使用を行った。 別途Vue.jsでもCookieの保存を行う必要があったため、下記の手順を行った。 １、vue-cookieを追加 ◯yarnでのインストール yarn add vue-cookie ◯npmでのインストール npm install vue-cookie ２、main.jsへの記述追加 // […]
vue.jsの自分用メモ書き
- 2020.03.14
◆ボックスの情報を取得 １、refで名前を指定 <div ref="box"></div> 2、要素の情報を取得（下記では高さ） let scrollHeight = this.$refs.box.clientHeight; ◆子供要素から親要素に値を渡す １、親に値を渡す this.$emit(‘hogehoge’, this.index); ２、 […]
vue.jsでスライダーを導入する
htmlで実装していたページをvue.js形式で作り直すことになった。 その際にスライダーを導入する必要があったため下記の対応を行った。 １、VueAwesomeSwiperを追加 ◯yarnでのインストール yarn add vue-awesome-swiper ◯npmでのインストール npm install vue-awesome-swiper ２、main.jsへの記述追加 // Swip […]
Vue.jsのrouter-linkにアンカーリンクを設定する
- 2019.10.02
- hash, router-link, アンカー, アンカーリンク, ハッシュタグ
遷移先の項目にアンカー移動したいときなど、router-linkの指定を行うことで「#hashtag」を末尾に追加出来る <router-link :to="{ name: 'hogeProject', hash: '#hashtag' }" > ページを移動する </router-link> ただしこのままでは、URL末尾にハッシュがつくのみであり、移動はまだ行われない。 […]
Vue.jsでURLパラメータから値を取り出す
- 2019.08.26
- パラメータ
http://hogehoge.com/info?edit=true&id=123456 上記のようなパラメータを含んだURLから、パラメータの値を取り出す。 今回、編集ページとそれ以外でページの分岐を行い、またパラメータでIDを渡す事を行った。 ——————————& […]