@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 …

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, }…

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

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

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

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

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

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

type nul > test.html

// updated: 2018/4/25 metismenu ・・・ class metismenuが複数あると2つ目がエラー？？？ 大画面ではサイドに固定されたmetismenuが使いたい モバイルではスワイプでmetismenuを使ったサイドバーを表示させたい 2種類のサイドバーを用意して画面サイズごと…