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入門 基礎から実践アプリケーション開発まで

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

 ------------------------solution-----------------------------------

import * as Konva from 'konva'

works correctly

referrence:

github.com

Vue の List rendering を Async させるのに躓いた件

updated: 2019/1/21

jimp で加工した list 表示でうまく表示タイミングが調整出来なくて加工前や表示自体されなくて躓いた

理由）

Due to limitations in JavaScript, Vue cannot detect the following changes to an array:

1. When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
2. When you modify the length of the array, e.g. vm.items.length = newLength

For example:

var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // is NOT reactive vm.items.length = 2 // is NOT reactive

解）Vue.set() を使う

To overcome caveat 1, both of the following will accomplish the same as vm.items[indexOfItem] = newValue, but will also trigger state updates in the reactivity system:

// Vue.set Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)

You can also use the vm.$set instance method, which is an alias for the global Vue.set:

vm.$set(vm.items, indexOfItem, newValue)

参照：

vuejs.org

update:

Vue.set() を使わなくても v-for に :key を付加させれば`dynamic にlist 表示することができた

Laravel 5.6 + VueJS add jquery globally

jquery を vue component のどこからでも使えるようにする

参考：

stackoverflow.com

VueJS クリック時に二つのメソッドを実行したい

→ @click="method1() & method2()"

& でつなげれば出来る

ここで（）をつけないでメソッド名だけでは動作しない。

＆無しの単体のメソッドならば（）は不要

別途両方を実行するメソッドを作ってもいいが mixin や vuex で作ったものを2つ利用したいときに無駄にメソッドを増やさなくて済む。

VueJS Routing に何らかのパラメータをつけたい

vue-router の meta が便利

これで $route.meta.profile に値が付くので

v-if="this.$route.meta.profile" 等でブラウザバックにも対応した routing ごとの conditional rendering ができて便利

Laravel でフロント側からのクエリパラメーターの処理

フロントからクエリパラメーターを二つ付けて送った

where では　intval() で型を変える必要があったがforPage() では $request->page のままで処理が可能だったことに注意