と検索するとまず$nextTickに辿り着く。あるいはsetTimeout。 ただこれは「DOMの更新を待つ」のであって、Vueのtransitionコンポーネントのアニメーション完了を待たない。そのためアニメーションして表示/非表示が切り替わるような要素が影響する情報（高さや位置情報）を、アニメーション完了後に取得したい～という場合$nextTickは不向き。 その場合はtransitionコンポーネントのJavaScriptフックを使う。
Vue.jsでDOMの更新を待ってイベントを発火する - Qiita
と検索するとまず$nextTickに辿り着く。あるいはsetTimeout。 ただこれは「DOMの更新を待つ」のであって、Vueのtransitionコンポーネントのアニメーション完了を待たない。そのためアニメーションして表示/非表示が切り替わるような要素が影響する情報（高さや位置情報）を、アニメーション完了後に取得したい～という場合$nextTickは不向き。 その場合はtransitionコンポーネントのJavaScriptフックを使う。
【Vue】Youtubeの埋め込み動画を表示する - Qiita
サイトにYoutubeの埋め込み動画を乗っける方法です。 Vue.js上でやっていくので、コンポーネント化して汎用的に使えるような実装を目標にします。 Youtubeの埋め込み情報を取得する 動画上で右クリック → "埋め込みコードをコピー" で取得できます。 下のようなコードが取得できます。これを任意の場所に張り付けるだけです。簡単でしょ？ <iframe width="1280" height="720" src="https://www.youtube.com/embed/jAH3MEsh3aU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" all
HTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法 - ICS MEDIA
Vue.jsは昨今よく使われるモダンなJavaScriptフレームワークの1つです。Node.jsで環境構築し、サイト全体をVue.jsベースで開発することもあります。しかし、フロントエンド開発に慣れていない方やデザイナーにはNode.jsでの環境は少し参入障壁が高いです。 実は、Vue.jsは<script>タグから読み込こめばNode.jsを用いずとも使えます。この方法ならばLP（ランディング・ページ）やWordPressサイトといったHTMLベースのサイトでもVue.jsを活用できるでしょう。本記事ではそのようなちょい足しVue.jsの活用例を、最新のVue Composition APIとESモジュールを使って紹介します。 Vue.jsをちょい足す HTMLに下記のようなコードを足すことで、Vue.jsを<div id="app">の要素内に導入できます。 <div id="app
Vueでタブメニューを作成する - Qiita
概要 SPAにおいてタブメニューは割と使い場面が多いので、実装方法を忘れないようにメモします。 こういうやつ↓ 実装 <div class="tab"> <div class="tab_box container"> <ul class="tab_list"> <li @click="changeTab('1')" v-bind:class="{'active': isActive === '1'}">New</li> <li @click="changeTab('2')" v-bind:class="{'active': isActive === '2'}">Trend</li> <li @click="changeTab('3')" v-bind:class="{'active': isActive === '3'}">Items</li> </ul> </div> </div> <d
【Vue.js】Vue.jsでfontawsome(Free版)を使用する方法 - Qiita
##【ゴール】 Vue.jsでfontawsomeを使用する。(Free版) ※Vue.jsバージョンは2.6.12です！！！ ##【メリット】 ■Vue.jsの理解度向上 ■UI向上 ##【環境】 mac catarina 10.156 Vue.js v2.6.12 ##【実装】 ####※node.js, vue.jsのインストールは割愛。ページ下に参考リンク貼っておきます🙇♂️ ####兎にも角にも、「npm install」 アイコンのコード入れたら全部使えるよにします〜 //ワークスペース作成 $ vue create fontawsome // fontawsomeのパッケージ（無料版のみ） $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-
axiosをグローバルに呼び出す - Qiita
import Vue from 'vue'; import axios from 'axios'; . . . Vue.prototype.$http = axios.create( { baseURL: process.env.VUE_APP_API_URI, withCredentials: true }, ); . . . methods: { fetchItemList() { return new Promise((resolve) => { this.$http.get('/api/v1/items').then((response) => { this.itemList = response.data.index; resolve(); }).catch(省略); }); }, }, . . .
Vueでコンポーネントの外側をクリックしたら閉じたい - Qiita
目的 コンポーネントの外側、または他の部分をクリックしたら、そのコンポーネントを非表示にしたい。 ModalやDialogのようなコンポーネントはscrim(黒い背景のこと)を持つため、外側をクリックしたら閉じるという動きを作りやすい。実際scrimはコンポーネント内ですし。 そうではなく、Popupなどの軽率にフロートしてなおかつ外側をクリックしたら閉じてほしい、というコンポーネントはそれぞれがdocument.onclickに反応する必要がある。 ググってみたらdirectiveで頑張っている例が多い。 vue-click-outside Custom Directive vue-click-outsideのコード https://github.com/vue-bulma/click-outside/blob/master/index.js ハンドラを通したりSSRを想定する過程で少し
コンポーネント内部での画面遷移 Vue.js備忘録 vol.02 - Qiita
##はじめに 前回に引き続き、vue.jsを触ってみて詰まった所などを備忘録としてまとめてみます。 ##Vue.js（SPA）におけるブラウザバック問題 SPAでの実装に慣れている方からすると初歩的なミスかもしれないが… このような画面遷移を行なっていた時 /hoge⇨/fuga⇨/fuga?page=2 ブラウザバックを行うと /fuga?page=2から/hogeに戻ってしまっていた。 ###考えられる原因 ページネーションでの遷移がhistory.replaceState()だった（現在の履歴エントリーを新しい履歴エントリーに置換する設定） history.pushState()にしたらいけるのでは！？！？ ###history.pushStateにしたものの… URLは/fuga?page=2⇨/fugaへ変わるが、画面が再描画されない！！ 今回作成していたページはAPIを叩いて一
Vuetifyのv-text-fieldでtype="number"の時に、表示されている値を変更する - Qiita
こんにちは！ 長らくプレーンJavaScriptガリゴリマンでしたが、最近仕事の関係でVue.jsを触り始めた和尚でございます それでは早速見ていきましょう！ 環境 Vue.js v2.6.11 Vuex v3.4.0 Vuetify v2.2.11 注意 ※かなりパワープレイです。参考程度に見てください。 本日の議題 ある昼下がりのこと Aさん「数値しか入れられないフォームに文字が入っちゃうんだけど、どうにかならない？あと、最大値が999のはずなのに、キーボードで入力すると1000以上入っちゃうからついでに直して...」 和尚「まじっすかー。ちょっと調べてみまーす！」 ... 今回の要件における Input type="number" の困った仕様 最大値と最小値はキーボード入力で超えることが可能 safariは文字列を入力すると自動削除されない chromeは指数表現のe・Eが入力でき
Laravel+Vue.jsで作成したSPAサイトでOGP対応 - Qiita
#はじめに 個人開発でLaravel5.5とVue.jsを使用して作成したSPAサイトがあり、長らく放置していたのですが、最近勉強を兼ねて少しリファクタリングをしようかなと思いました。 ラブライブ専用掲示板 上記が作成したサイト（掲示板）になります。 治すべき部分はたくさんあるのですが、まず気になったのがTwitterカードの表示です。 特に、掲示板のスレッドURLをツイートした際に、デフォルトの情報が表示されてしまうのが見た目の部分で致命的でした。 まずやったこと 最初にapiでスレッドの情報を読み込んだ後のタイミングでquerySelectorを使用して動的にmetaタグを変更しました。 //APIでデータ取得後 document.title = this.thread_header[0].title + ' | LoveLiveBBS'; document.querySelector
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js（Nuxt.js）で動的に外部のjsファイルを読み込む方法 - Qiita
【Vue.js + (laravel)】画像データをPOSTしたい - Qiita
【Vue.js】ボタンの切り替えテクニック - Qiita
【Nuxt.js】v-forの一意なマーキングを使って削除ボタンを作る - Qiita
[Vuex] <select> タグで 配列の state を v-model したい。。。[HACK] - Qiita
Vue.js のテンプレートで複数行にまたがる table の tr を表示する - Qiita
画面上部へ移動できるボタンを設置してみた - Qiita
【Vue.js】src/assetsフォルダに画像ファイルを設置し、v-forで画像を表示する - Qiita
【Laravel + Vue】ファイルパスに .. を使いたくない【webpackConfig Alias】 - Qiita
【Vuex】Stateを丸ごと置き換える - Qiita
