monteecristoo’s blog

https://twitter.com/irakaarozo

React を使うならライセンスに注意

it.srad.jp

Laravel update 5.4 to 5.5

composer.json ファイルを

github.com

をコピーしてペースト。

composer.jsonの自分でカスタマイズした部分をペースト。

composer update

php artisan --version でアップデートを確認。

 

参考:

laravel.com

www.youtube.com

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.params.userName);
  },
  id() {
    return this.loadedUser.id;
  }
},

 

data や method から this.loadedUser.id とアクセスしようとしても

Cannot read property 'id' of undefined

エラーが出る

Laravel pagination backend setting with Vue.js

@relationships.php

public function res_recommend() // users not follow
{
  $fs = $this->follows()->get(); // Auth_userがfollowしているuser
  $follows = array();
  foreach($fs as $f) {
    array_push($follows, $f->target_id);
  }
  array_push($follows, $this->id);
  $users = \App\User::whereNotIn('id', $follows)->paginate(3); // $follows以外のuser
  return $users;
}

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 に読み込んだ users の中からURLにマッチした user を返すを定義

const getters = { 

  loadedUser(state) {
    return (id_st) => {
      return state.loadedUsers.find((loadedUser) => {
        return loadedUser.id_st === id_st;
      });
    };
  },

}

 

f:id:monteecristoo:20170912215149j:plain

#9

Vue.jsのライフサイクルでまずgettersより先にgetUserPic(loadedUser.avatar)が解釈される(???)ので、

app.js:sourcemap:12834 TypeError: Cannot read property 'avatar' of undefined

と表示されるが後にgettersでloadedUser.avatarの値が決まる(???)ので表示は正常に動作する。

consoleのバグ取りは出来ない???

 ____________________________________________________________________

vue.js@2.4.3で上記が動作しなくなった???(要検証)

computedのfunctionの引数の this.$route.params.userName が passing 出来なくなった???

 

@getUserPicMixin.js

computed: {
  loadedUser() {
    return this.state.profile.loadedUser;

  }

}

 

@profile.js

const state = {
  loadedUser = ""

}

  

const actions = {
/* Add user to loadedUsers from profile.vue */
  loadUser({ commit }, user) {
    commit('LOAD_USER', user);
  }
};

 

const mutations = {
  'LOAD_USER' (state, user) {
    state.loadedUser = user;
  }
};

 

@profile.vue

created() {
  axios.get("/user/info/" + this.$route.params.id).then(response => {
    const user = response.data;
    this.loadUser(user);
  });

}

---------------------------------------------------------------------

this.$route.params.id の passing を created() 経由で処理することで解決

app.js:sourcemap:12834 TypeError: Cannot read property 'avatar' of undefined

はエラー表示しなくなった。