monteecristoo’s blog

https://twitter.com/irakaarozo

React を使うならライセンスに注意

// it.srad.jp

Laravel update 5.4 to 5.5

// composer.json ファイルを github.com をコピーしてペースト。 composer.jsonの自分でカスタマイズした部分をペースト。 composer update php artisan --version でアップデートを確認。 参考: laravel.com www.youtube.com

Vue.js Lifecycle

#74

Vue.js within Laravel 5.x

Laravel 内の Vue.js vue-loader@13.0.4にアップデートすると [Vue warn]: Failed to mount component: template or render function not defined. とエラーが出るので vue-loader@12.2.2 を使用(要検証) yarn add vue-loader@12.2.2

Vue.js  computedへのアクセス

computed() Computed properties are defined as no-argument functions 参考: stackoverflow.com computed同士なら this.foo で定義した computed 同士で値にアクセスできる computed: { loadedUser() { return this.$store.getters.loadedUser(this.$route…

Laravel pagination backend setting with Vue.js

@relationships.php public function res_recommend() // users not follow { $fs = $this->follows()->get(); // Auth_userがfollowしているuser $follows = array(); foreach($fs as $f) { array_push($follows, $f->target_id); } array_push($follows, $…

Vue.jsのcomputedにgettersを使用した時のconsole上のエラー

// ある関数の引数にcomputedしたloadedUserを使用 <img :src="getUserPic(loadedUser.avatar)"> computedにgettersであるloadedUserを使用 computed() { loadedUser() { return this.$store.getters.loadedUser(this.$route.params.userName); } } gettersでのloadedUser // loadedUsers に読み込んだ …

Vue.js: share funcitons and data etc each component -- Mixin

@someMixin.js export const someMixin = { data() { return { }, methods: { }, computed() { } @someComponent.vue import { someMixin } from './someMixin'; export default { mixins: [someMixin] } #174 global mixin はすべてのsingle vue instance …

Vue.js toggle css classes

bind single class bind object to manage multi css classes <script src="https://unpkg.com/vue"></script><div id="app"> <div class="demo" @click="attachRed = !attachRed" :class="divClasses"> </div> <div class="demo"></div> <dv class="demo"></dv> </div> new Vue({ el: '#app', data: { attachRed: false, }…

Vuex state management

state data をとどめておく場所。どの component からも this.$store.state.hoge からアクセス可能 getters state を加工したい場合使用。同じ加工を複数の component で使用したい場合、code の duplicate を防ぐ。どの component からも this.$store.gette…

Laravel5.4 ORM + PHP Traits

// ORMにfunctionを追記出来るがreusableでなく、肥大化することがあるためtraitsを使うことがある。 TraitsやORMのfunctionはmethod chainやORM向けのmethodを使用できる点で優れる。 @App\foo.php (ORM) use App\Traits\Friendable; class User extends Au…

Vue.js within Laravel Authentication from Vue component

// Laravel内に設置型のVue.js component内からLaravelのAuth::routesを使う方法 * vue component内にはlaravel blade template が使えないので {{ route('logout') }} 等の便利なディレクティブが使えない。 通常の {{ route('logout') }} で発行されるHTML…

Authentication Laravel with Vue.js

9 Backend @UserController.php /*-------------------------------------- | For Frontend Authentication | ---------------------------------------*/ public function signup(Request $request) { $this->validate($request, [ 'name' => 'required', '…

CSS position: sticky;

CSS

// CSS position stickyについて 他のカラム等を加味しながら要素を固定したい e.g) サイドバーと別カラムでトップメニューを固定表示したい → sticky 他の要素を加味しない → fixed stickyを使うときはtop, left, right等の場所を指定するプロパティーと一…

vue-awesome-swiper でメニューバーをstickyに表示したい

// vue-awesome-swiperはflexboxを使っている。 cssに追加 .swiper-wrapper { align-item: flex-start; } →→ フレックスボックスの上端をそろえる .swiper-container { overflow: visible !important; } →→ デフォルトでvue-awesome-swiperはoverflow: hidde…

Windowsコマンドプロンプトから空のファイルを作成

type nul > test.html

metismenu + vueJs スクリーンサイズに応じて切り替えたい場合

metismenu ・・・ class metismenuが複数あると2つ目がエラー??? 大画面ではサイドに固定されたmetismenuが使いたい モバイルではスワイプでmetismenuを使ったサイドバーを表示させたい 2種類のサイドバーを用意して画面サイズごとに切り替えたい →→ disp…

Laravel blade template でVueを使うときの注意 稀なエラー

blade templateで@section('hoge')を設定したのち、 vue側のapp.jsでvueをinjectするタグを以下のように同じ<hoge>に設定すると… Vue.component('hoge', require('./componets/Hoge.vue')); エラー(コンソールにもコンパイル時もエラーが表示されない)でvueが表示</hoge>…

PeachScript/vue-infinite-loading each element CSS management

github.com infinite-loadingの各elementをイベントを通じてcssを管理 ロードされるlist内にcss管理用のvariableを設置する listのelementに無効なクラスを設定しておいて(defaultでは無効でクラス無し扱い)、イベントでクラスを有効化する

noraesae/perfect-scrollbar でbarが表示されない件

noraesae/perfect-scrollbar #containerのwidthやheightが中に入れたコンテンツのwidthやheighより大きいため。 demoでHeightを中の画像より大きい800pxにするとy-railが消える

Laravel5.4 ORM + Traits + Controller + Routes

level 1. routes.phpに全部記述 leavel 2. controllerを使ってrouteへの記述量を減らす level 3. Eloquent ORMを使ってroute、controllerの記述量を減らす level 4. ORMにTraitsを付与してORMの記述量を分散 cati #9 TraitsやORMへの記述はcontroller側にも…

Vue packages version mismatch: が出たら…

環境:VueJS within Laravel npm run dev → Vue packages version mismatch: - vue@2.x.x - vue-template-compiler@2.x.x yarn.lockが原因??? 参考: github.com yarnを使ったことが無いので詳細は分からないが npm install yarn -g yarn upgrade で依存…

Vue-infinite-loading error: [Vue warn]: Property or method "recommend" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Vue-infinite-loadingでv-forのpropertyにエラーが出る場合 <p v-for="(recommend, key) in list"> <div id="recommend"> <span v-text="recommend"></span> </div> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading> 余分な<div>があるとエラーが出る。 解決方法: <p v-for="(recommend, key) in list"> </p></div>

vue-router with dynamic router-link

vue-routerのrouter-linkを使ってdynamicなlinkの生成 方法① @app.js const routes = [ { path: '/user/:userName', component: Profile, children: [ { path: '', component: Activity, }, { path: 'follow', component: Follows }, { path: 'activity', co…

UI Elements

www.nxworld.net blog.8bit.co.jp tympanus.net Bootstrapで使えるjQueryプラグイン | ENTEREAL metismenu github.com .metismenuが二つあると片方がバグる display: none してもダメ //

Laravel5.4 ORMにexternal functionを付与

例えばApp\Userに外部からfunctionを付与したい場合 @Http直下に以下を設置 @Http\ExternalFunc\Greeting.php

VueJS within Laravel dynamic image binding @nested route

hoge.vue <img :src='user.avatar' > <script> export default { computed: { user() { return this.$store.state.user.user; } }, 上記でdynamicにimageを切り替えられるが、 サブドメインのrouteを定義した場合、 vue-router経由で該当ページまで表示させた場合とページのリロードで表示させ…

check user relationship

#15 parent child server-side //

tinker

$follows = App\Follow::where('user_id', 4)->get() => Illuminate\Database\Eloquent\Collection {#727 all: [ App\Follow {#750 id: 1, user_id: 4, target_id: 1, created_at: "2017-05-30 11:44:03", updated_at: "2017-05-30 11:44:03", }, App\Follow…

oauth認証で突然動作不良が起きたら… Received HTTP status code [401] with message "<?xml version="1.0" encoding="UTF-8"?> <hash> <error>The given URL is considered malware</error> <request>/oauth/request_token</request> </hash> " when getting temporary credentials.

oauth認証が突然出来なくなった → 原因: ドメインがSpamhausのブロックリストに登録されたため 確認方法: oauth認証先のセッティング画面でcallbackURLを変えてみる 例えばtwitterでは… とアラートが出るのでシステムの問題ではなくドメインブロックの問題…