Vue.nextTickとは？ callbackを延期し、DOMの更新サイクル後に実行します。DOM更新を待ち受けるために、いくつかのデータを変更した直後に使用してください。 VueはDOMを非同期に更新するため、「DOMを更新した後にその更新済みのDOMに対して何らかの処理をする」といったような場面でnextTickが役立ちます。 // single file component <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'default' } }, mounted() { this.message = 'hello'; console.log(this.$el.textContent); // default この時点ではまだD
概要 Webアプリでクライアントサイド(ブラウザ)で画像を圧縮(リサイズ)する方法の紹介です。 サンプルとして下図のような入力した画像をプレビュー表示した上で、確定時にサーバーに画像をアップロードするまでのサンプルコードを紹介します。 ※今回はvue.jsとvuetifyによるサンプルになりますが、UIのレイアウト部分以外は基本的に一般的なjavascirptですので 他のフレームワークを使用している場合等でも参考にはなるかと思います 動くデモとGitHubのサンプルコードは下記です。 Demo GitHub 背景 Webアプリで、画像ファイルをアップロードするといったシチュエーションはよくあると思います。 スマホ等で撮影した写真等だと、解像度やファイルサイズも大きいため、そのまま使用せず一度リサイズしたりする事が多いかと思います。 アップロード後にサーバ側で処理するといった手法もあります
はじめに この記事では、単一のチェックボックスでオン/オフ（true/false）を表す場合と、複数のチェックボックスから値を取得できるコードを紹介します。 動作環境 Vue.js 2.6 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Practice</title> </head> <body> <div id="app"> <form> <label for="agree">規約に同意する</label> <input type="checkbox
こんにちは、mahです。 このブログでは、 僕がIT未経験から約1年でフリーランスエンジニアになるまでの過程、 ノウハウなどを書いていきます。 今回は、 【Vue.js】現在のパス(URL)を取得する【Vue-Router】 について書いていきます。 【Vue.js】現在のパス(URL)を取得する【Vue-Router】 【Vue.js】現在のパス(URL)を取得する【Vue-Router】 手順 例、現在のパスによってリダイレクト先を変える関数 Vue.jsや流行りのTypeScriptを学びたい人へ 最後に あわせて読みたい 手順 現在のパスは、 this.$route.path で取得出来る。 Vue-Routerリファレンス https://router.vuejs.org/ja/api/#router-onerror 例、現在のパスによってリダイレクト先を変える関数 # js:s
v-for で配列に要素をマッピングする配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです: <ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) 結果: {{item.message}} v-for ブロック内で
※ 2020/04/13 drag, drop系を追記しました ※ 2020/07/22 formの内容を修正しました はじめに フロントエンド自体が初心者なので正直この辺りについては全然理解が追い付いてないです。 今回は簡単なサンプルを作りながら自分なり理解していこうと思います。 メソッドハンドラ Vue.jsでは「v-on」ディレクティブを用いることで要素にイベントリスナをバインドします。 イベント一覧 ※すべてではないです 。 click, dblclick クリック、ダブルクリック時に発火するイベントです。 See the Pen QJKKqL by b1san (@b1san1) on CodePen. keyup, keydown キーアップ、キーダウン時に発火するイベントです。 キー修飾子 キー修飾子を指定することで任意のキーのみでイベントを発火させることができます。 キーコ
はじめに Googleドライブの画像表示みたいなUIを作りたいと思っていたところ、vue-image-lightbox を使うと 簡単に実現できたので、最低限の実装方法を残したいと思います。 vue-image-lightboxとは？ サムネイルから、画像を拡大表示したり、スライドショーにしたりするための機能を提供しているライブラリです。 参考情報 vue-image-lightbox https://www.npmjs.com/package/vue-image-lightbox ソースコード https://github.com/ryuckel/vue-playground/tree/vue-image-lightbox 今回の記事で実現した内容 以下の画像のようになるところをゴールとします。 記事中は主にライブラリに関係した部分を書いてます。ソースは参考情報から見てみてください。 環
VueJs でコンポーネントを作っていたら真っ白なページが表示されている。 コンソールを見るとこんなエラーが出ていた。 Uncaught RangeError: Maximum call stack size exceeded at Watcher.get (vue.esm.js?efeb:3156) at new Watcher (vue.esm.js?efeb:3131) ....何が原因かと小一時間悩んだ結果、コンポーネントの中で自分自身を呼び出していたのが原因だった。 例えば <template> <ErrorComponent></ErrorComponent> </template> <script> export default { name: 'ErrorComponent' } </script> 内部で ErrorComponent(自分自身) を呼び出さなければ解決。
Vueのイベントトリガをデバックコンソールで直接設定・発火させる 実際のところ vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') //=> hi一回だけしか実行しないONCEというのもあります vm.$once('testOnce', function (msg) { console.log(1) }) vm.$emit('testOnce', 'hi') //=> 1 vm.$emit('testOnce', 'hi') // *なにもでない*コンポネントで作成した子要素をアレコレしたい場合は 別途工夫が必要です。 参考もと Vue.js jp.vuejs.org
【vue】 axiosで複数APIコールをまとめて処理して、まとめて受け取り、どこかのAPIコールで失敗しても、処理を続けるためのメモpromiseVue.jsVuexAsyncAwaitpromise.all はじめに こんにちは。Vuex最近微妙じゃね？って周りで騒がれて、「俺、Vuex使ってるけど、、やめたほうがいいならどうしたらいいんだろう・・・」って最近悩んでいる今日この頃。 Vueでaxiosを使って、連続でAPIをコールする際に、Promise.allやaxios.allを使ってまとめて投げて、まとめて受け取れるということを知ったときにはまった内容です。 axiosを使って、 1. 複数URL情報を格納した配列をまとめてAPI送信して、まとめて結果を受け取れる 2. まとめて投げているAPIで一つのURLのAPIコールが失敗しても処理を停止しない 3. Async/Await
はじめにvue-routerのリファレンスに以下の記述があるが、どこまで再利用されるか気になったので調べた。 ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /user/foo から /user/bar へ遷移するときに同じコンポーネントインスタンスが再利用されるということです。 両方のルートが同じコンポーネントを描画するため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。 検証環境package.json "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" } 検証プロパティが変更された場合まずはリファレンスに記述のある、コンポーネント内のプロパティの変更を試す。 ソースコードimport Vue from
忘れないように記録。 解決すべき問題 パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない 例えば検索クエリが変わっただけではコンポーネントは更新されない。 解決策 公式サイトに書かれている通り、beforeRouteUpdate(to, from, next)を使う。 /users?page=1から/users?page=2に移動するときなどに呼ばれる。 ページネーションのライフサイクル /usersという一覧画面を考える。 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); import UserIndex from 'path/to/UserIndex'; const routes = [ { path: '/users', name: '
VueのUIフレームワークVuetifyでは、テキストボックスである v-text-field に値削除ボタンを表示するオプションが clearable が指定できるのですが、この仕様が少し気になったのでメモします。 v-text-field に適当な文字列プロパティをバインドし、フォームの入力値とプロパティの値を連動させます。 <div id="app"> <v-app id="inspire"> <v-col cols="12" sm="6" md="3"> <v-text-field label="Clearable Form" v-model='text' clearable @input="inputed" ></v-text-field> </v-col> <v-col cols="12" sm="6" md="3"> <p>text: {{ text === null ? '
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く