Vue.jsで同一ページでパラメーターが変更されたことを検知する
ページ内でタブを使用している。 タブの内容に対してパラメータを用いて直接アクセスしたいという依頼を受けた。 例）http://hogehoge.com/list?tab=2 仕様： ・例のようにURLにタブを指定するNo（タブの幾つめか）が含まれていればそのアクセス時にそのタブを表示 ・タブ遷移時にはURLパラメータを更新してユーザーがパラメータ付きURLをコピーできるようにする —& […]
Coding
1/13ページ
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への記述追加 // […]
Cookieで制御して閉じるボタンをクリックするまで要素を表示する
- 2020.08.12
- Cookie
Cookieをちゃんと使ったことがなかったので、参考サイトをベースに作成してみました。 実装したい仕様としては、下記になります。 ・ウェブサイト内に、チュートリアルのモーダルウィンドウを表示する ・チュートリアルは複数ページに必要 ・各モーダルは[閉じる]ボタンを押すことで消せる ・一度消したモーダルはCookieが消えるまで再表示しない モーダルは表示できていたので、必要なのは下記の２点。 ・モ […]
iPhone端末でDate関数が取得できないときの対応
json形式で取得した日付入りの配列を用いて「◯日以内ならNewアイコンを付ける」処理を設定していた。 new Date関数で、取得した日付「2020-05-19 05:50:43」を取得。 現在の日時と比較していたが、この日付の指定ではiPhone端末でDate関数で値が変換できない。 「2020-05-19T05:50:43」の形にする必要があったため、replaceの変換を追加した。 ◆元の […]
簡単に郵便番号を自動入力する機能を追加できる「YubinBango.js」
- 2020.05.19
- YubinBango.js, 自動入力, 郵便番号
郵便番号の自動入力のスクリプトを探していたら、簡単に導入できるものを見つけた。 郵便番号のコードをサイトに入れなくていい（更新したり管理しなくても良い）のと、導入方法がシンプルで早いため案件作成時に重宝した。 ライブラリの取得＆解説はこちらを参考にしました。 郵便番号の自動入力「YubinBango.js」の使い方と都道府県コードを使う方法 ◆導入した見本 ◯郵便番号入力前 ◯郵便番号入力後 ※郵 […]
cssのIDやclassの先頭に数字を使う
cssのIDやclassの先頭に数字を用いることは出来ない。（num01のように、後ろにつけることはできる） 404ページのURLが/404/などの場合、ページと同じID/classを動的につける場合にそのページだけ処理を変えるなど行っていた。 ただし、下記のように数字をエンコードすると、css内でも数字を用いる事が出来るようになる。 エンコードを調べる：https://mothereff.in/ […]