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/と末尾に/が余分についてしまう。
例えばApp\Userに外部からfunctionを付与したい場合
@Http直下に以下を設置
@Http\ExternalFunc\Greeting.php
<?php
namespace App\ExternalFunc;
ExternalFunction Greeting
{
public function Hello()
{
return "Hello friends";
}
}
上記のfunctionをApp\Userに登録
use App\ExternalFunc\Greeting;
class User extends Authenticatable
{
use Greeting;
これで例えばtinkerから
$user = App\User::find(1);
>>> $user->Hello()
=> "Hello friends"
参考：
#15
parent
child
server-side
$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 {#749
id: 2,
user_id: 4,
target_id: 2,
created_at: "2017-05-30 11:44:04",
updated_at: "2017-05-30 11:44:04",
},
],
}
>>> foreach($follows as $follow) { return $follow->user()->get(); }
=> Illuminate\Database\Eloquent\Collection {#738
all: [
App\User {#728
id: 4,
name: "Akari1987",
email: "",
provider: "github",
provider_id: "13121500",
avatar: "1496292872.jpg",
created_at: "2017-05-28 11:05:58",
updated_at: "2017-06-01 04:54:32",
},
],
}
-=======================================================
>>> $friends = array()
=> []
>>> $follows = App\Follow::where('user_id', 4)->get()
=> Illuminate\Database\Eloquent\Collection {#717
all: [
App\Follow {#718
id: 4,
user_id: 4,
target_id: 3,
created_at: "2017-06-10 23:26:25",
updated_at: "2017-06-10 23:26:25",
},
App\Follow {#719
id: 5,
user_id: 4,
target_id: 2,
created_at: "2017-06-10 23:29:07",
updated_at: "2017-06-10 23:29:07",
},
App\Follow {#720
id: 6,
user_id: 4,
target_id: 1,
created_at: "2017-06-10 23:29:10",
updated_at: "2017-06-10 23:29:10",
},
],
}
>>> foreach($follows as $follow) {
... array_push($friends, App\User::find($follow->target_id));
... }
=> null
>>> return $friends
=> [
App\User {#727
id: 3,
name: "test3",
email: "test3@test.com",
provider: null,
provider_id: null,
avatar: "1495604118.jpg",
created_at: "2017-06-09 22:41:08",
updated_at: "2017-06-09 22:41:08",
},
App\User {#723
id: 2,
name: "test2",
email: "test2@test.com",
provider: null,
provider_id: null,
avatar: "1495604947.jpg",
created_at: "2017-06-09 22:41:08",
updated_at: "2017-06-09 22:41:08",
},
App\User {#726
id: 1,
name: "test",
email: "test@test.com",
provider: null,
provider_id: null,
avatar: "1495699904.jpg",
created_at: "2017-06-09 22:41:08",
updated_at: "2017-06-09 22:41:08",
},
]
