vuetifyのselectboxの値によってフォームの表示,非表示を切り替えたい
概要
vue + vuex + vuetify を用いて動的なフォームを作成したいのですが,
selectboxで選ばれた結果によって動的にフォームの表示,非表示を切り替えたいです.
環境
vue 2.5.2
vuex 3.0.1
vuetify 0.17.2
現状
App.vue
<template>
<v-app>
<v-form>
<template v-for="form in forms">
<v-text-field
v-if="form.type==='text' && form.show" <!-- form.showがtrueのとき表示-->
:label="form.label"
v-model="form.value"
required
>
</v-text-field>
<v-select
v-if="form.type==='select'"
:label="form.label"
v-model="form.value"
:items="form.options"
@change="change"
required
>
</v-select>
</template>
</v-form>
</v-app>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'App',
computed: {
...mapGetters([
'forms',
])
},
methods: {
change () {
//ここどうすればよいのかわからない.
}
}
}
</script>
<style scoped>
</style>
form.js(vuexのモジュール)
const state = {
forms: [
{
id: 'name',
label: 'name',
type: 'text',
value: '',
show: true
},
{
id: 'sex',
label: 'sex',
type: 'select',
options: [
'man',
'woman'
],
value: '', //ここのvalueが変化したタイミングでquestionのshowを書き換えたい
effect: [ //影響を与えるフォームのid.このidのshowを変更したい
'questionForMan',
'questionForWoman'
],
show: true
},
{
id: 'questionForMan',
label: 'question',
type: 'text',
value: '',
show: false //sexによって質問を
},
{
id: 'questionForWoman',
label: 'question',
type: 'text',
value: '',
show: false
}
]
}
const getters = {
forms (state) {
return state.forms
}
}
const mutations = {
}
export default {
state,
getters,
mutations,
}
質問
App.vueの<v-select>
が変化したタイミングでforms
の中のquestionForMan
,questionForWoman
の中の値show
を変えることでフォーム表示,非表示を行いたいです.
forms
の中のデータはaxiosで取得する予定なので,実行時にオブジェクトを取ってくるしか無いのですが,
v-model
で値を変えてもその後のstateの変化をどう処理すればよいかわかりません.
また,@change="処理"
でメソッドを呼び出すことも考えたのですが,vuetifyの<v-select>
が現在何の値を取っているのか(e.target.value
等で取得できるのか?),mutations
の呼び出し方がわかりません.
vue, vuetify, vuexを触るのは初めてで初歩的な質問なのかもしれませんが,どなたかご教授ください.