Vuejs

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

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

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がレンダリングさ…