

# 概要

vue + vuex + vuetify を用いて動的なフォームを作成したいのですが，  
selectboxで選ばれた結果によって動的にフォームの表示，非表示を切り替えたいです．

# 環境

vue 2.5.2  
vuex 3.0.1  
vuetify 0.17.2

# 現状

App.vue

[code]

    <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>
    
[/code]

form.js(vuexのモジュール)

[code]

    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,
    }
    
[/code]

# 質問

App.vueの`<v-select>`が変化したタイミングで`forms`の中の`questionForMan`,`questionForWoman`の中の値`show`を変えることでフォーム表示，非表示を行いたいです．

`forms`の中のデータはaxiosで取得する予定なので，実行時にオブジェクトを取ってくるしか無いのですが，  
`v-model`で値を変えてもその後のstateの変化をどう処理すればよいかわかりません．

また，`@change="処理"`でメソッドを呼び出すことも考えたのですが，vuetifyの`<v-select>`が現在何の値を取っているのか（`e.target.value`等で取得できるのか？）,`mutations`の呼び出し方がわかりません．

vue, vuetify, vuexを触るのは初めてで初歩的な質問なのかもしれませんが，どなたかご教授ください．


CC BY-SA 3.0
2017-11-21T13:38:56.557
39741
2021-04-04T00:55:59.287
2021-04-04T00:55:59.287
32986
26070
question
javascript vue.js axios
vuetifyのselectboxの値によってフォームの表示，非表示を切り替えたい