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">

   <span v-text="recommend"></span>

</p>

<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading>

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', 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/と末尾に/が余分についてしまう。

UI Elements

www.nxworld.net

blog.8bit.co.jp

tympanus.net

Laravel5.4 ORMにexternal functionを付与

例えば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"

 

参考:

www.youtube.com

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経由で該当ページまで表示させた場合とページのリロードで表示させた場合で起点となるURIが違うため<img src="">のpathが食い違いエラーが出る

対処:

stackoverflow.com

stackoverflow.com

 

check user relationship

 

#15 

parent

f:id:monteecristoo:20170605192758j:plain

child

f:id:monteecristoo:20170605192802j:plain

server-side

f:id:monteecristoo:20170605193324j:plain

tinker

$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",
},
]