Vuejs

VueJS: handling edge case - http request で得た値をprops として子component にパスした時、mounted で値を加工しようとしたらprops の取得タイミングの都合で正しい値を取得できない。さらにその値を編集したい場合

http request で得た値をprops として子component にパスした時、mounted で値を加工しようとしたらprops の取得タイミングの都合で正しいprops の値を取得しないで処理されてしまうエラーの回避。さらにその値を編集したい場合。 環境: vue@2.6.12 @親コン…

Vuetify badge Component のテキストスタイルを変更する

環境: vuetify@2.6.6 <v-badge color="primary red--text font-weight-bold"> primary >>> バッジ自体のカラー red--text >>> バッジ内のテキストカラー</v-badge>

Vuex state を form に使うとき、入力と同時に state が更新されてしまう問題

環境: vue@2.6.14 vuex@3.6.2 <v-text-fileld v-model=$store.state.userData.nickname></v-text-field> このように state をバインドすると値が入力するたびに stateが更新されるため、フォームが submit されようと cancel されようと関係なく submit 扱いになってしまう。 solution) フォームで編集したいデータを値渡しで格納す…

Laravel と Vuejs の連携 laravel 側の データを vuejs template 内で使用する

Updated: 2024_02_16 環境: laravel@8.79.0 vue@2.6.14 @app.blade.php <div id="vue"> <app-pageBody :passing-data="`{{ Sesssion::get('passingData'); }}`"></app-pageBody> 必ずバッククォート``で囲う </div> @someController.php session()->put('passingData', "Hello this is a passing data"); @PageBody.vue props: ['passingD…

VueJS Browser back を検知する detect browser back

環境: vue@2.6.14 vuex@3.6.2 @app.js history.replaceState(null, '', null)window.addEventListener('popstate', function() { vue.$store.commit('ROUTER_DETECT_BROWSER_GO_AND_BACK')}) @router.js const state = { detectBrowserGoAndBack: 0 } const…

Vuetify - v-text-fieldの中身をマニュアルで空にする

vuetify@2.5.5 ケース: v-text-fieldの入力の先頭の文字にスペースを入力されたら弾きたい solution: text-fieldの入力を検知 入力の頭がスペースか判別 text-filedにrefを設定してv-text-field component内のdataにアクセス スペースなら中身を空に 1. <v-text-field v-model="hoge" @input=input ref="foo"> 2 </v-text-field>…

Vuetify で v-dialog を2重にネストして発生する infinite recursion エラー

v-dialogのダイアログ内でもう一つネストしてv-dialogを設置すると、 2段目のダイアログを2回開閉すると下記のエラー でタブがクラッシュする。 solution) ネストされたv-dialog に:retain-focus=false を設定 ref: github.com

VueJs: component と slot の取り扱い

環境: vue@2.6.12 ある二つのモジュールについて、、、

Vuexでstateにあらかじめ設定していないプロパティを新たに挿入するときの注意事項

環境: vue@2.6.12 vuex@3.6.2 state = { test: {} } mutations = { 'addNewProp'(state, payload) { state.test[payload.key] = payload.content OR Object.assign(state.test, {[payload.key]: payload.content}) } } 上記でstateに新しいプロパティを付与…

VueJSでメモリマネジメントを加味した無限スクロールを実装

updated: 2021/7/18 無限スクロールは読み込むほどDOMが大きくなるので画面外のDOMは極力消して軽量化する必要がある。 より簡単な方法があったので加筆 vuetify の intersection-observer ディレクティブを使うと楽 環境: vue@2.6.12 vuetify@2.5.6 vue-in…

VueJS: Computed property "hoge" was assigned to but it has no setter

環境: vue@2.6.12 computed propertyをメソッドで直接定義し直したら Computed property "hoge" was assigned to but it has no setter とエラー computed property を再定義する場合、あらかじめ該当するproperty に setter, getter を設定しておく必要が…

Vuetifyを使って電話番号フォームのvalidation

updated: 2021/4/27 環境) vue@2.6.12 vuetify@2.3.18 vuex@3.5.1 vuetifyのv-textfieldを使って電話番号のフォームvalidationを実装する フォームのフィールドは電話番号全体で一つとするのではなく、ハイフンで区切って3つのフィールドを持つものとする。…

VueJS: componentのdataを初期化する reset component datas

componentを初期化する方法に関して solution1) v-ifを使って初期化 solution2) マニュアルでdataに初期値を割り当てる ref) qiita.com プロフェッショナルWebプログラミング Vue.js 作者:山田 典明,長澤 賢,関口 勇樹 発売日: 2020/11/11 メディア: Kindle版

canvas element を通常のイメージ扱いし、モバイル端末でタッチスクロールできるようにする

canvas で画像を composite し、生成された canvas を通常の img のように表示上をタッチスクロール可能にするためには… 環境: vue@2.6.12 konva@7.1.3 canvas を dataURL に変換してcanvas と置換 ⇒ キャンバスを一度画面にレンダリングした後でないと変換…

VueJS + canvas でレスポンシブなcanvasの生成でつまずいた時

環境: vue@2.6.12 konva@7.1.1 dialog内でcanvas生成時、width, height を指定するのでその値をリアクティブに取得したいがdialogのtoggle等でDOM生成前に値を0で取得してしまい、うまくcanvas が描画できない場合 mounted() { this.resizeStage() this.$ne…

vue-router のナビゲーションガードによる昔の twitter like な modal の実装

updated: 2020/10/16 環境: vue@2.6.12 vuex@3.5.1 vue-router@3.4.6 Goal: あるユーザーのポストにダイレクトにアクセス時、 modal を閉じると当該ユーザーのプロフィールページに移行。 また、タイムラインからあるユーザーのポストにアクセス時、 modal …

VueJs 条件付きでクリックイベントを listen する

Updated: 2020/9/2 APIを叩いてからボタンをクリックできるようにしたい等々 環境 Vue@2.6.12 <button @click="eventReady ? someFunc() : null"> computed: { eventReady() { if( // write condition ) { return true } else { return false } } } methods: { someFunc() { } } ----------------------------</button>…

Vuetify - v-dialog の v-model に vuex state を指定する方法 --- v-dialog を別のコンポーネントから制御する

updated: 2021/6/16 通常 v-dialog は v-model で 該当コンポーネントが保持する data の値を指定する。 それによって dialog の外側をクリックしたときに表示を toggle することができる。 ここで vuex の state を指定すると外側クリック時にコンソール上…

list rendering + v-model : v-model にdynamic な値を割り当てる/ Vuetify: v-dialog + list rendering

updated: 2020/2/15 vue@2.6.11 vuetify@2.2.12 vuetify の v-dialog を v-for 内で使用するとき個別の値を v-model に割り当てないとdialog に正しい list の値がパスされない。 https://github.com/vuetifyjs/vuetify/issues/5246 そこで v-for="(item, in…

VueJS: computedで得たListをlist rendering し、かつその値を変更させる必要があるとき

vue@2.6.11 Example computed: { items() { this.$store.state.items } } itemsは{name: "ITEM_NAME", quantity: 0}の複数配列とする。 <v-for item in items :key=item.key> {{ item.name }} <v-btn @click="item.quantity++"> >>>>> computedは基本的にgetterとして使用するのでボタンを押してもquantityの値を変化させられな</v-btn></v-for>…

Vuex: stateの取得

updated: 2019/12/11 vue@2.6.10 vuex@3.1.2 以下要検証 vuexのstateを取得するときdataで取得することができるが data() { return { target: this.$store.state.target } } 取得したstateのプロパティにアクセスするときに取得前の値(null?)を参照してしま…

VueJS: データ取得のタイミングの調整

updated: 2019/10/15 Vue@2.6.10 Vuex@3.1.1 前回の http://monteecristoo.hatenablog.com/entry/2019/09/16/074708 と同様にデータ取得のタイミングに関するエラー対応について syntaxでデフォルトで定義されていないディープにネストされたプロパティを含…

Vue の data の初期値について

updated: 2019/12/11 Vue@2.6.10 Vuex@3.1.1 あるdata, vuex stateプロパティ等の初期値をnullにしておくと 参照したvue syntaxで値は正しく取得されるがコンソールにnullを参照したことによるエラーが表示される。 ""や{}等適当な値を初期値にセットしてお…

VueJS: 兄弟component間で同一メソッドを伝播させたい

updated: 2020/2/5 vue@2.5.7 vuex@3.0.1 ParentComponent.vue <app-child-component v-for="1 in n" > 親componentからv-forを使って複数の子componentが存在 子componentAで発生させたdoSomething()を兄弟componentB、C、D、、、でも同様に発生させたい。この方法について。 i) Vuexを使ってstat</app-child-component>…

画像やフォントサイズをresponsiveに調整する方法 Vuetify使用時

v-layout と v-flex を使用する(full fluid + conditional) <v-layout wrap> <v-flex lg3>1/4画像</v-flex> <v-flex lg6>1/2画像<v-flex> <v-flex lg3>1/4画像<v-flex> <v-layout> css img { width: 100%; height: auto; } ** layout にwrap を忘れないように。子コンポーネントがlayoutに収まるようになる。 ref: https://vuetifyjs.com/en/componen</v-layout></v-flex></v-flex></v-flex></v-flex></v-layout>…

VueJs: v-if 注意事項 keep-aliveを使って List rendering

updated: 2019/10/15 v-ifによる条件分岐で大規模なList Renderingはやらないほうがいい。 v-if の component DOM の destroyによるコストが大きくなるから。 infinite scrollを含んだcomponentにv-ifを使った結果、致命的なパフォーマンスissueが発生した。…

vue-router In-Component Guards

vue-router@3.0.6 beforeRouterEnter(to, from, next) { next(vm => { console.log(vm) vm <<<< router-viewを使っている場合、最終的にrouter-viewで表示されるcomponentのインスタンス }) 従って、router-view と In-Component Guardsを使えば別のcomponen…

VueJS: List rendering した item を削除

<div v-for="(item, index) in items"> <button @click="deleteItem(item, index)"> data() { return { items: ['test', 'hi', 'hey'] method: { deleteItem(item, index) { axios.post('delete', item) { // server 側にデータをpost } this.items.splice(index, 1) // client 側のlist を更新 さらに list rendering が component を利用</button></div>…

Vuetify: vue-dialog で dialog が閉じられた際、イベントを発火したい

updated: 2020/10/5 <v-dialog v-model="dialog" @close="close"> ** dialog に input を含む場合は@input="v => v || close()" ** v => v はアロー関数 methods: { close() { console.log("closed") }, ref: vuejs.org github.com developer.mozilla.orgdeveloper.mozilla.org Vue.js入門 基礎から実践</v-dialog>…

VueJS + Konva vue-konva を使わずに konva を取り入れる

vue-konva の transform がモバイルに対応していなかったので。。。 <template> <div id="some-component"> </div> </template> <script> import Konva from 'konva' export default { mounted() { let stage = new Konva.Stage() error: Konva is undefined </script> import {Konva} from 'konva' error: Stage is undefined ----…