#containerのwidthやheightが中に入れたコンテンツのwidthやheighより大きいため。
demoでHeightを中の画像より大きい800pxにするとy-railが消える
level 1.
routes.phpに全部記述
leavel 2.
controllerを使ってrouteへの記述量を減らす
level 3.
Eloquent ORMを使ってroute、controllerの記述量を減らす
level 4.
ORMにTraitsを付与してORMの記述量を分散 cati #9
TraitsやORMへの記述はcontroller側にも書けるがTraitsへの記述はfunction化してreusableなので複数使う場合はTraits化が望ましい。
またTraitsやORMのfunctionはmethod chainやORM向けのmethodを使用できる点で優れる。
cati#10
参考:
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">
<span v-text="recommend"></span>
</p>
<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading>
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', component: Activity
}
]
},
@componet
<router-link :to="'/user/' + user.name"><router-link>
方法② named-routerを使う
@app.js
const routes = [
{ path: '/user/:userName?', component: Profile,
children: [
{
path: '', component: Activity, name: 'activity'
},
{
path: 'follow', component: Follows
},
{
path: 'activity', component: Activity
}
]
},
@componet
<router-link :to= "{ name: 'activity', params: { userName: user.name } }">
</router-link>
router-linkのparamのuserNameは通常定数にしないとchromeのコンソール上下記のエラーが出る
app.js:65434 [vue-router] missing param for named route "activity": Expected "userName" to be defined
これを消すにはapp.js側のparameterである:userNameに?を付けてオプショナル扱いにする。
方法②には問題点がある。
/user/userNameでデフォルトでcomponentのActivity.vueを表示させたい場合、
child pathの''にActivityを登録するため
このrouter-linkを辿ると/user/userName/と末尾に/が余分についてしまう。
