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の応答速度が悪い)
参考：
