monteecristoo’s blog

https://twitter.com/irakaarozo

javescript: JSONのプロパティを変数を使って定義する

1段階のnestであれば[]を使って簡単にできる。 2段階ネストされた変数を使ったプロパティを新規に追加する場合 下記ではエラー

javascript jsonのキーの有無を調べる

hasOwnProperty()を使う ref. https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

VueJs: v-if 注意事項

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

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…

Laravel formData validation

formData に image を入れてデータを送る場合 @FrontEnd const formData = new FormData() formData.append("image", BLOB_IMAGE_DATA) axios({ method: 'post', url: 'SERVER_URL', data: formData, config: { headers: {'Content-Type': 'multipart/form-d…

Scroll の up, down を検知する

以下、vuejs syntax に従って書くと... mounted() { window.addEventListener('scroll', this.wheelDelta) }, data() { return { currentPosition: 0, previousPosition: 0, scrollDelta: 0 } }, methods: { wheelDelta() { this.currentPosition = docum…

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: 2019/3/22 <v-dialog v-model="dialog" @close="close"> ** dialog に input を含む場合は@input="close" methods: { close() { console.log("closed") }, ref: vuejs.org github.com</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 ----…

Laravel 5.6 + VueJS add jquery globally

jquery を vue component のどこからでも使えるようにする 参考: stackoverflow.com //

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

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

Laravel-Mix: node_modules 内のpackageのcssをコンパイルする

webpack.mix.js で指定したコンパイルするscss内でインポートさせる 例: node_module perfect-scrollbar の css をコンパイルしたい @import '~perfect-scrollbar/css/perfect-scrollbar.css'; 参考: stackoverflow.com //

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7 ⑩ 特定のcollectionのネストされたキーの値を取得する

mysql の select XX に当たるのが mongoDB では projection 'user_id' => 1 は true という意味 参考: github.com jenssegers/laravel-mongodb を使わないで mongoDB php driver を使うなら 参考: MongoDB\Collection::findOne() — PHP Library Manual 1.4…

MongoDB PHP driver

新しい ObjectId を作る @mongo shell ObjectId(); @php new MongoDB/BSON/ObjectId; PHP側でnamespaceを使っていたら… use MongoDB\BSON\ObjectID; new ObjectID; 参考: BSON — PHP Library Manual 1.4 PHP: MongoDB\BSON\ObjectId - Manual //

vue-infinite-loading と laravel の連携

updated: 2018/10/3 @vue ?page=1 のクエリを添えてGET @laravel $request->page で欲しいpage番号を指定 forPage() はpage1 と page2以降で返り値の挙動に差があるエラーがあるので下記参照 github.com // gist.github.com

Laravel 5.x Factory と Faker で relational なモックアップを作る。

jenssegers/mongodb の mysql relationships で使用可能なことが確認済み php artisan make:factory FACTORY_NAME factory1 factory2 seeds/DatabaseSeeder.php php artisan db:seed これでfaker モックアップ + user と pixieImage のrelationship に整合性…

jenssegers/laravel-mongodb Basic Usage on cloud9 with php7 ⑨ Mysql relationships で mongoDB と mysql 上のデータを合わせて返す。

updated: 2018/10/1 Mysql relationships については下記参照 monteecristoo.hatenablog.com mongoDBとMysqlをjoin して返したい場合、mongoDBはjoinに対応していないので、 PixieImage は mongoDB上のデータベース user はmysql のデータベース さらにこれ…

php artisan db:seed でエラー

データベーステーブルを適切に削除しなかったため。 solution: php artisan migrate:refresh //

jenssegers/laravel-mongodb Installation on php7.2 cloud9

Updated: 2018/9/27 php7.2 を cloud9 にインストール monteecristoo.hatenablog.com MongoDB のインストール monteecristoo.hatenablog.com PHP 用の MongoDB ドライバーをインストール PHP: Installing the MongoDB PHP Driver with PECL - Manual sudo pe…

php の mongodb ドライバーをインストールしようとしたらエラーが発生した cloud9

環境: php7.2 cloud9(ubuntu14.0.4) cloud9 で php5 から php7 にアップデート済み MongoDB ver 4.0.2 sudo pecl mongodb => Parse error: syntax error, unexpected 'new' (T_NEW) in /usr/share/php/PEAR/Frontend.php on line 91 solution: sudo apt-g…

CSS経由でFontAwesomeを表示→なぜかfont-familyでFontAwesomeがrenderされない時

CSS

font-weight を指定しないといけない場合がある 参考: www.genius-web.co.jp saruwakakun.com //

VuetifyでComputed property “drawer” was assigned to but it has no setter 等エラーが発生したら・・・

updated: 2018/9/13 Navigation-drawerを子componentで使用したいため、default の data: drawer を親子間で共有したいため、 mixinを使ってcomputed: {drawer: true} で共有した。 すると下記のエラー Computed property “drawer” was assigned to but it h…

Laravel blade template と VueJS の連携 blade template 内の vue component にデータをパスしたい

updated: 2018/9/5 blade template 内の vue component にデータをパスしたい場合 例えば authHome.blade.php / guestHome.blade.php の二つに共通で PageBody.vue という vue component を使うとき、Laravel 側で Auth::checkして得た情報を PageBody にパ…

Laravel-Mix issue: vue-loader のバージョンをアップグレードしたら vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 等、大量のエラーメッセージ

laravel-mix@2.1.11 vue-loader@15.3.0 vue-loader を @14.2.2 から @15.3.0 にアップでしたらエラーが発生 solution: webpack.mix.js にプラグインを適用 let mix = require('laravel-mix'); const VueLoaderPlugin = require('vue-loader/lib/plugin') mix…

cloud9 で Nginx を使う

updated: 2018/8/4 cloud9 では初めから Nginx がインストールされている。 初期設定ではポートが 80 になっている。cloud9 で使用できるポートは 8080, 8081, 8082 なので 設定を変える。 docs.c9.io @/etc/nginx/sites-available sudo nano default >>> se…

Biglobe sim ドコモ回線 定期回線速度測定

sim

5時30分 @千葉県千葉市 エンタメフリーオプション YouTube 480p → たまに止まるけど見れる程度12時頃 エンタメフリーオプション YouTube 480p → たまに止まるけど見れる程度12時30分 YouTube 240p → 見れる程度19時 23時30分

github と cloud9 の連携 fork 編

まず github 上で fork したいレポジトリを fork 次に cloud9 で新規ワークスペースを作成。この時 git clone の clone 元はオリジナルではなく fork した自分のレポジトリにする。(そうしないと cloud9 から push 出来ない。) github 上で fork し、git clo…

toto random generator

resultタブを開くと0~2の数字がランダムに13個出力されます。 もう一度出力したい場合は他のタブを開いた後、resultタブを開いてください。 楽天toto //

VueJS 子コンポーネントに値をパスするときの謎の挙動

responseは[{prop1: {}, prop2: {}}, {prop1: {}, prop2: {}}] とする messages ではこのresponse をすべて格納して modifiedMessages ではprop2を削除して格納したい。 @messages.vue 親コンポーネント <app-messages v-for="message in messages" m=message key=message.id > mounted() { axios.get('getMessages').then(respons</app-messages>…

VueJs: method 内で setTimeout を使い setTimeout 内で他に定義した method を呼び出す方法

methods: { testFunc() { console.log('OK'); } }, mounted() { setTimeout(function(){ this.testFunc(); // エラー }, 1000); } this.testFunc() だとエラー。以下に訂正 mounted() { var self = this; setTimeout(function(){ self.testFunc(); // OK },…