Vue.nextTickのコードリーディング
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
ブラウザ側でサイズ圧縮(リサイズ)して画像表示やアップロードを行う(Vue.js) - Qiita
概要 Webアプリでクライアントサイド(ブラウザ)で画像を圧縮(リサイズ)する方法の紹介です。 サンプルとして下図のような入力した画像をプレビュー表示した上で、確定時にサーバーに画像をアップロードするまでのサンプルコードを紹介します。 ※今回はvue.jsとvuetifyによるサンプルになりますが、UIのレイアウト部分以外は基本的に一般的なjavascirptですので 他のフレームワークを使用している場合等でも参考にはなるかと思います 動くデモとGitHubのサンプルコードは下記です。 Demo GitHub 背景 Webアプリで、画像ファイルをアップロードするといったシチュエーションはよくあると思います。 スマホ等で撮影した写真等だと、解像度やファイルサイズも大きいため、そのまま使用せず一度リサイズしたりする事が多いかと思います。 アップロード後にサーバ側で処理するといった手法もあります
【Vue.js】複数のチェックボックスから動的に値を取得する方法 | すくまりのメモ帳
はじめに この記事では、単一のチェックボックスでオン/オフ（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
【Vue.js】 現在のパス(URL)を取得する 【Vue-Router】 - スリ飯屋MaLankaのフリーエンジニアな日々
こんにちは、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
Vue.js: v-forで項目インデックスをkey属性にしていいのか - Qiita
v-forディレクティブを使うと、データに納められた複数の項目がページに要素として差し込めます。このときv-forにkeyを与えるのが、「スタイルガイド」に定められた「必須」のルールです(「キー付き v-for」)。 一意のkey特別属性とインデックス key特別属性は、要素に一意の値を与えます。:keyはv-bind:keyの省略構文です(「key」参照)。
リストレンダリング — Vue.js
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 ブロック内で
【Vue.js】イベントハンドリングをサンプルを作りながら理解する - Qiita
※ 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 キーアップ、キーダウン時に発火するイベントです。 キー修飾子 キー修飾子を指定することで任意のキーのみでイベントを発火させることができます。 キーコ
【Vue.js】vue-image-lightbox で画像ギャラリーを作成！ - Qiita
はじめに 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 今回の記事で実現した内容 以下の画像のようになるところをゴールとします。 記事中は主にライブラリに関係した部分を書いてます。ソースは参考情報から見てみてください。 環
Vue で Uncaught RangeError: Maximum call stack size exceeded - おろログ
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のイベントトリガをデバックコンソールで直接設定・発火させる - Bye Bye Moore
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コールで失敗しても、処理を続けるためのメモ - Qiita
【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
Vuejs vue-router コンポーネントインスタンスの再利用について
はじめにvue-routerのリファレンスに以下の記述があるが、どこまで再利用されるか気になったので調べた。 ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /user/foo から /user/bar へ遷移するときに同じコンポーネントインスタンスが再利用されるということです。 両方のルートが同じコンポーネントを描画するため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。 検証環境package.json "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" } 検証プロパティが変更された場合まずはリファレンスに記述のある、コンポーネント内のプロパティの変更を試す。 ソースコードimport Vue from
Vue Routerでのページネーションライフサイクル - Qiita
忘れないように記録。 解決すべき問題 パラメータまたはクエリの変更は 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/Vuetify】Vuetifyのv-text-fieldのclearableを有効にすると、削除時のmodelにはnullが挿入される - Ren's blog
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ページを開く
New mode: VueJS! · Issue #171 · InfyOmLabs/laravel-generator
[Vue] 任意のタグにフォーカスする際などに、$refsが最適すぎた件 - Qiita![[Vue] 任意のタグにフォーカスする際などに、$refsが最適すぎた件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/33e0e33dee282852234f98e6f790229968a350da/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlJTVEJTIwJUU0JUJCJUJCJUU2JTg0JThGJUUzJTgxJUFFJUUzJTgyJUJGJUUzJTgyJUIwJUUzJTgxJUFCJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgyJUFCJUUzJTgyJUI5JUUzJTgxJTk5JUUzJTgyJThCJUU5JTlBJTlCJUUzJTgxJUFBJUUzJTgxJUE5JUUzJTgxJUFCJUUzJTgwJTgxJTI0cmVmcyVFMyU4MSU4QyVFNiU5QyU4MCVFOSU4MSVBOSVFMyU4MSU5OSVFMyU4MSU4RSVFMyU4MSU5RiVFNCVCQiVCNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDUyYjEwN2M2MjJiOGJlYjFhNmQ4NWQ4OTFkZDdhMTk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBwb25fbWFlZGEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIzNDI3ODM4MGE4MjM1Yzk2ZTY1OTkwZDc4NTZkMDU5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D298daf9c7c39b57314f77e5444ec9d9a)
【Vue】Avoid mutating a prop directlyエラーの発生原因と対処法 - Qiita
Vue.jsでスクロールを検知する - Qiita
https://www.web-development-kb-ja.site/ja/global-variables/vuejs%E3%81%A7%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E5%A4%89%E6%95%B0%E3%82%92%E5%AE%A3%E8%A8%80%E3%81%99%E3%82%8B%E6%9C%80%E8%89%AF%E3%81%AE%E6%96%B9%E6%B3%95%E3%81%AF%E4%BD%95%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/826209096/
https://www.web-development-kb-ja.site/ja/javascript/axios-vueaxiosall%EF%BC%88%EF%BC%89%E3%81%8C%E5%AE%9F%E8%A1%8C%E3%82%92%E7%B6%99%E7%B6%9A%E3%81%97%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B/808948906/