データベーステーブルを適切に削除しなかったため。
solution:
php artisan migrate:refresh
Updated: 2018/9/27
PHP: Installing the MongoDB PHP Driver with PECL - Manual
sudo pecl install mongodb でエラーが出るので
sudo pecl install mongodb
composer require jenssegers/mongodb
successfully installed!!
@config/app.php
'mongodb' => [ 'driver' => 'mongodb', 'host' => env('DB_HOST', 'localhost'), 'port' => env('DB_PORT', 27017), 'database' => env('DB_DATABASE'), 'username' => env('DB_USERNAME'), 'password' => env('DB_PASSWORD'), 'options' => [ 'database' => 'admin' // sets the authentication database required by mongo 3 ] ],
MongoDBのauth設定をしていない(./mongod でWARNING で表示される)なら'user_name' 'password' をコメントアウト
'port' => env('DB_PORT', 27017), としておくとなぜか
違うport につながってエラーになるので
'port' => env(27017)
にするとOK
updated: 2018/9/13
Navigation-drawerを子componentで使用したいため、default の data: drawer を親子間で共有したいため、
mixinを使ってcomputed: {drawer: true} で共有した。
すると下記のエラー
Computed property “drawer” was assigned to but it has no setter
以下で解決
----------------------------------------------------------------------------------------
@Header.vue (子component)
<v-toolbar-side-icon @click="switch1"></v-toolbar-side-icon>
import { VuetifyMixin } from '../../mixins/VuetifyMixin.js'
methods: {
switch1() {
this.$store.dispatch('forVuetify_switchDrawer')
}
}
@PageBody.vue (親component)
<v-navigation-drawer
fixed
clipped
:value.sync="drawer"
app
>
import { VuetifyMixin } from '../../mixins/VuetifyMixin.js'
@VuetifyMixin.js
export const VuetifyMixin = {
computed: {
drawer() {
return this.$store.state.forVuetify.drawer
}
},
}
Vuex
const state = {
drawer: false
};
const mutations = {
'SWITCH_DRAWER' (state)
{
state.drawer = !state.drawer
}
};
const actions = {
forVuetify_switchDrawer({ commit })
{
commit('SWITCH_DRAWER');
}
};
export default {
state,
mutations,
actions
}
参考:
UPDATED:
over-lay をnavigation-drawer に使った場合、over-lay 部分をクリックした際のイベントinput により、drawer の値に誤作動が出る。over-lay を使用しない、または over-lay を自分で実装すれば回避できるが手間なので今回は component を separate しないでオリジナルの data: { drawer: bool } で管理することにする。
UPDATED:
vuesax を使ってみたらsidenavbar のモバイルでのスワイプでの挙動が vuetify より優れていたのでそちらに変更。(vuetifyのsidebarのtoggleの応答速度が悪い)
参考:
updated: 2022/2/18
より良い方法:
blade template 内の vue component にデータをパスしたい場合
例えば
authHome.blade.php / guestHome.blade.php
の二つに共通で PageBody.vue という vue component を使うとき、Laravel 側で Auth::checkして得た情報を PageBody にパスしたい場合
router 側でAuth::check の結果で表示する view を切り替える。
@authHome.blade.php / guestHome.blade.php
@extends('layouts.app')
@section('content')
<div id="app">
<pageBody></pageBody>
</div>
@endsection
blade template から直接 vue component にデータをパスすることはできないのでブラウザのセッションストレージを使う。
@authHome.blade.php
@extends('layouts.app')
@section('content')
<div id="app">
<pageBody></pageBody>
</div>
<script>
sessionStorage.clear();
sessionStorage.setItem("guest", "false");
</script>
@endsection
@guestHome.blade.php
@extends('layouts.app')
@section('content')
<div id="app">
<pageBody></pageBody>
</div>
<script>
sessionStorage.clear();
sessionStorage.setItem("guest", "true");
</script>
@endsection
@PageBody.vue
<script>
export default {
data() {
return {
auth: ""
}
},
beforeMount() {
this.auth = sessionStorage.getItem("guest");
}
これで vue component 側に auth 情報がパスできたので 例えば v-if 等で login logout register 等の header を切り替えることが出来るようになる。
laravel-mix@2.1.11
vue-loader@15.3.0
vue-loader を @14.2.2 から @15.3.0 にアップでしたらエラーが発生
solution:
webpack.mix.js にプラグインを適用
let mix = require('laravel-mix');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
mix.webpackConfig({
plugins: [
new VueLoaderPlugin()
]
});
参照:
また、vue-loader を @14.2.2 から @15.3.0 にアップデートしたら yarn run watch 時の下記のエラーメッセージが発生しなくなった。
No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
yarn の全てのコマンドをした時のエラーメッセージ
yarn
uses deprecated new Buffer()
constructor and causes deprecation warnings when run with NODE_PENDING_DEPRECATION=1
.
上記も発生しなくなった。