【Vue.js + (laravel)】画像データをPOSTしたい - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
大きな画像をJavaScriptでリサイズしてからAjax送信する方法
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
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を想定する過程で少し
[Vuex]ヘルパー関数createNamespacedHelpersを複数のstoreから使う - Qiita
<script> import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('hoge/Hoge') // Hoge.jsのStateとActionsを使う const { mapState: mapStateOfFuga, mapActions: mapActionsOfFuga } = createNamespacedHelpers('fuga/Fuga') // Fuga.jsのStateとActionsを使う export default { computed: { ...mapState([ 'aaa', 'bbb' ]), ...mapStateOfFuga(['xxx']) }, methods: { ...mapActions
![[Vuex]ヘルパー関数createNamespacedHelpersを複数のstoreから使う - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/957f8145eff37059c50abf49f6fb7451ef145c1f/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVleCU1RCVFMyU4MyU5OCVFMyU4MyVBQiVFMyU4MyU5MSVFMyU4MyVCQyVFOSU5NiVBMiVFNiU5NSVCMGNyZWF0ZU5hbWVzcGFjZWRIZWxwZXJzJUUzJTgyJTkyJUU4JUE0JTg3JUU2JTk1JUIwJUUzJTgxJUFFc3RvcmUlRTMlODElOEIlRTMlODIlODklRTQlQkQlQkYlRTMlODElODYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTk1MzgzZTg3ZjQxNTI5YmU5MDAwMzYxYTcyOWFhYjEw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDAwMF9fJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zMDdmY2IzMDdiMjE2MWEyZmYwYzFkN2JkM2YyMmYwNw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gRmx1dHRlcuWkp-Wtpg%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Db7c937df29e3d680c2c7a84e7c68e363)
Vuexのヘルパー関数createNamespacedHelpersの使い方 - Qiita
<script> import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('hoge/Hoge') // Hoge.jsのStateとActionsを使う export default { computed: { ...mapState([ 'aaa', 'bbb' ]) }, methods: { ...mapActions([ 'ccc', 'ddd' ]) } } </script> import { createNamespacedHelpers } from 'vuex' でVuexをインポートし、createNamespacedHelpersで使うように設定しています。 const { mapState, mapActions
【Vue.js】vue-i18nを使って多言語化 - Qiita
import Vue from 'vue' import VueI18n from 'vue-i18n'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: 'ja', messages: { // 翻訳用のjson ja : require('../lang/ja.json'), en : require('../lang/en.json'), cn : require('../lang/cn.json'), tw : require('../lang/tw.json') } }); const app = new Vue({ el: '#app', i18n: i18n, components: { } })
コンポーネント内部での画面遷移 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を叩いて一
Vueにおけるフラッシュメッセージ表示のロジック - Qiita
導入 Vueを使用して、フラッシュメッセージ（一時的に表示され、一定時間経つと自動的に消えるメッセージ）を作成するために、Vuexのストア機能を利用します。 なぜフラッシュメッセージの表示にVuexを利用するのか？ Vuexのメリットとは？ Vuexを利用するメリットは以下のようなことだそうです。 アプリケーション全体に関わる「状態」を、コンポーネントがバラバラに持たずに、ストアというデータ保管場所で一括で管理することにより、データ移動の複雑性が一気に解消される、という点にある。 ちょいとむずいな〜。 どういうことかというと、以下の図をから説明してみます。。。 例えば、Bというコンポーネントで何らかの状態が変化して、DコンポーネントのUIを変更しなければならない場合、Vuexを使用しないと何が起こるのでしょうか？ Vueのコンポーネント間では、兄弟関係のデータの受け渡しはできず、必ず「親か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】怖がらないで、引数分割束縛（argument destructuring） - Qiita
【Vue.js】ボタンの切り替えテクニック - Qiita
【Nuxt.js】v-forの一意なマーキングを使って削除ボタンを作る - Qiita
Vuetify でフィルタリング機能付きセレクトボックスを実装する - Qiita
nuxt spa, ssg, ssrそれぞれのasyncData, fetchのタイミング - Qiita
[Vuex] <select> タグで 配列の state を v-model したい。。。[HACK] - Qiita
Vue. js 親コンポーネントのメソッドの呼び出し - Qiita
なんとなくVue.jsのUIフレームワークを紹介する - Qiita
Vue.js のテンプレートで複数行にまたがる table の tr を表示する - Qiita
画面上部へ移動できるボタンを設置してみた - Qiita
【Vue.js】ref属性でマーキングしたコンポーネントを$refsで取得 - Qiita
