と検索するとまず$nextTickに辿り着く。あるいはsetTimeout。 ただこれは「DOMの更新を待つ」のであって、Vueのtransitionコンポーネントのアニメーション完了を待たない。そのためアニメーションして表示/非表示が切り替わるような要素が影響する情報（高さや位置情報）を、アニメーション完了後に取得したい～という場合$nextTickは不向き。 その場合はtransitionコンポーネントのJavaScriptフックを使う。
と検索するとまず$nextTickに辿り着く。あるいはsetTimeout。 ただこれは「DOMの更新を待つ」のであって、Vueのtransitionコンポーネントのアニメーション完了を待たない。そのためアニメーションして表示/非表示が切り替わるような要素が影響する情報（高さや位置情報）を、アニメーション完了後に取得したい～という場合$nextTickは不向き。 その場合はtransitionコンポーネントのJavaScriptフックを使う。
サイトに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
Vue.js（Nuxt.js）で動的に外部のjsファイルを読み込む方法になります。 Vue.js（Nuxt.js）で動的に外部のjsファイルを読み込む方法 <template> <button @click="importScript">click</button> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ methods: { importScript() { const script = document.createElement('script') script.setAttribute('src', 'https://www.youtube.com/iframe_api') script.setAttribute('id', 'script_id') docum
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
概要 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で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-icons $ npm i --
Vue.jsで画像データをPOSTしたかったのでformDataを使って実現しました 【画面側】 type="file" の入力欄と送信ボタンを用意 画像の選択(input)が行われたとき、送信ボタンが押されたときにそれぞれ処理を行う <template> <input @change="fileSelect" type="file" name="file"> <button @click="upload" type="submit">送信</button> </template> <script> export default { name: "TestView", data: function () { return { selected_file: null } }, methods: { //ファイル選択時の処理 fileSelect: function(e) { //選択したファ
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(省略); }); }, }, . . .
目的 コンポーネントの外側、または他の部分をクリックしたら、そのコンポーネントを非表示にしたい。 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を想定する過程で少し
v-forで出現したコンポーネントを削除するボタンを実装する まずは、それぞれの要素にマーキングし、削除ボタンも一意化する <v-col cols="4" v-for="(feed, index) in feeds" :key="index"> <v-card> <v-card-actions> <v-btn @click="deleteFeed(index)" icon>
はじめに 前回に引き続き、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"の時に、表示されている値を変更するJavaScriptVue.jsVuexVuetify こんにちは！ 長らくプレーンJavaScriptガリゴリマンでしたが、最近仕事の関係でVue.jsを触り始めた和尚でございます それでは早速見ていきましょう！ 環境 Vue.js v2.6.11 Vuex v3.4.0 Vuetify v2.2.11 注意 ※かなりパワープレイです。参考程度に見てください。 本日の議題 ある昼下がりのこと Aさん「数値しか入れられないフォームに文字が入っちゃうんだけど、どうにかならない？あと、最大値が999のはずなのに、キーボードで入力すると1000以上入っちゃうからついでに直して...」 和尚「まじっすかー。ちょっと調べてみまーす！」 ... 今回の要件における Input type="number
export default { replaceState (state, { value }) { Object.assign(state, value) } }
はじめに 個人開発で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ページを開く