現在VueとVuexを使って以下のような簡単なアプリを作っています。
質問に答えた後に次の質問が表示させるよう、以下の様にv-ifを設定したのですが、うまくいきません。
Basic.vue
1<template> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-6 offset-3 mt-4 mb-4"> 5 <div class="card"> 6 <div class="card-header bg-light text-center"> 7 <p class="text-secondary mb-0"> 8 <i class="fas fa-file-alt mr-1"></i>以下にお答えください 9 </p> 10 </div> 11 <div class="card-body"> 12 <div class="question-1"> 13 <p class="control-label text-info"> 14 -現在生命保険に加入されていますか?- 15 </p> 16 <div class="form-group"> 17 <input 18 @click="setVal($event, q1Val)" 19 value="はい" 20 type="radio" 21 name="question-1" 22 id="q1-yes" 23 /> 24 <label for="q1-yes">はい</label> 25 </div> 26 <div class="form-group"> 27 <input 28 @click="setVal($event, q1Val)" 29 value="いいえ" 30 type="radio" 31 name="question-1" 32 id="q1-no" 33 /> 34 <label for="q1-no">いいえ</label> 35 </div> 36 </div> 37 38 <div class="question-2" v-if="checkVal(q1Val)"> 39 <p class="control-label text-info"> 40 -現在入院中ですか?または、最近三ヶ月以内に医師の診察・検査の結果、入院・手術を勧められたことはありますか?- 41 </p> 42 <div class="form-group"> 43 <input 44 @click="setVal($event, q2Val)" 45 value="はい" 46 type="radio" 47 name="question-2" 48 id="q2-yes" 49 /> 50 <label for="q2-yes">はい</label> 51 </div> 52 <div class="form-group"> 53 <input 54 @click="setVal($event, q2Val)" 55 value="いいえ" 56 type="radio" 57 name="question-2" 58 id="q2-no" 59 /> 60 <label for="q2-no">いいえ</label> 61 </div> 62 </div> 63 64 <div class="question-3" v-if="checkVal(q2Val)"> 65 <p class="control-label text-info"> 66 -過去5年以内に、病気やけがで、手術を受けたことまたは継続して7日以上の入院をしたことがありますか?- 67 </p> 68 <div class="form-group"> 69 <input 70 @click="setVal($event, q3Val)" 71 value="はい" 72 type="radio" 73 name="question-3" 74 id="q3-yes" 75 /> 76 <label for="q3-yes">はい</label> 77 </div> 78 <div class="form-group"> 79 <input 80 @click="setVal($event, q3Val)" 81 value="いいえ" 82 type="radio" 83 name="question-3" 84 id="q3-no" 85 /> 86 <label for="q3-no">いいえ</label> 87 </div> 88 </div> 89 </div> 90 </div> 91 92 <div class="page-move mt-4"> 93 <router-link to="/" 94 ><button class="btn btn-info col-4"> 95 前に戻る 96 </button></router-link 97 > 98 <router-link 99 :to="{ 100 path: '/consul', 101 }" 102 ><button class="btn btn-info col-4 offset-4"> 103 次に進む 104 </button></router-link 105 > 106 </div> 107 </div> 108 </div> 109 </div> 110</template> 111 112<script> 113export default { 114 computed: { 115 q1Val() { 116 return this.$store.state.q1Val; 117 }, 118 q2Val() { 119 return this.$store.state.q2Val; 120 }, 121 q3Val() { 122 return this.$store.state.q3Val; 123 }, 124 }, 125 methods: { 126 checkVal: val => val !== "", //valを入れても空文字判定になり、次の質問が表示されない 127 setVal(e, key) { 128 key = e.target.value; 129 console.log(key); 130 }, 131 }, 132}; 133</script>
store.js
1import Vue from "vue"; 2import Vuex from "vuex"; 3 4Vue.use(Vuex); 5 6export default new Vuex.Store({ 7 state: { 8 q1Val: "", 9 q2Val: "", 10 q3Val: "", 11 } 12})
あなたの回答
tips
プレビュー