#74
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
参考:
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: share funcitons and data etc each component -- Mixin
@someMixin.js
export const someMixin = {
data() {
return {
},
methods: {
},
computed() {
}
@someComponent.vue
import { someMixin } from './someMixin';
export default {
mixins: [someMixin]
}
#174
global mixin はすべてのsingle vue instance 生成時に影響が出るので注意
mixin life cycle
Vue.js toggle css classes
- bind single class
- bind object to manage multi css classes
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div class="demo" @click="attachRed = !attachRed" :class="divClasses"> </div>
<div class="demo"></div>
<dv class="demo"></dv>
</div>
new Vue({
el: '#app',
data: { attachRed: false, },
computed: {
divClasses: function() {
return { red: this.attachRed, blue: !this.attachRed };
}
}
});
or other way
- change class dynamicaly by v-model
demo3 が2つのクラスを持てることに注意
- dynamicaly styling with no css class
Vuex state management
state
data をとどめておく場所。どの component からも this.$store.state.hoge からアクセス可能
getters
state を加工したい場合使用。同じ加工を複数の component で使用したい場合、code の duplicate を防ぐ。どの component からも this.$store.getters からアクセス可能
actions
import mapActions from 'vuex';
methods: {
...mapActions({
loadUser: 'loadUser'
}),
