monteecristoo’s blog

https://twitter.com/irakaarozo

Vuejs

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…

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…

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…

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では無効でクラス無し扱い)、イベントでクラスを有効化する

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…

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経由で該当ページまで表示させた場合とページのリロードで表示させ…

Laravel5.4 + VueJS CSRF token error: TokenMismatchException in VerifyCsrfToken.php line 68:

middleware->('auth')を使用時form関連を扱うときtokenが必要 純粋なLaravel App なら blade templateの {{ csrf_token() }} からtokenを取得して <input type="hidden" name="_token" value="7YC0Sxth7AYe4RFSjzaPf2ygLCecJhblahblah"> をセット、または <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>"> で解決できるがvueの場合や外部のパッケージを利用し…

Laravel + vue-router vue SPAページのRouting @vueJS inside Laravel

基本 app.jsで記述したpathをlaravel側のweb.phpにも記述。その際、returnするviewはvueの起点ページにする。 Route::get('/profile', function() { return view('home'); }); → home.blade.phpにvue componentのprofileがある場合、profileがレンダリングさ…

Vue chips いろいろ

htmlタグ内では{{ }}は使わないで v-bindまたはコロンで下記のように記述 data() { return { img: "http://~~~~" } } <img :src='img'> セミコロンの取り扱い セミコロンなし → static <router-link to="hoge"> セミコロンあり → dynamic <router-link :to="foo"> computed: { foo() { regrgergs } vuexでstateを設定した後</router-link></router-link>…