【Vue.js　’v-show','v-if'】ラジオボタン選択で、次の項目表示方法

ラジオボタン選択したら、次の質問内容が表示されるようにしたい

最初の画面では質問が1つ表示されていて、”はい”　または　”いいえ”を押すと次の質問がでてくるという流れを実装したいです。

発生している問題・エラーメッセージ

現在v-showを使い実装しようとしているのですが、うまくいかなく困っていました。
そもそも　v−if での条件分岐のほうがいいのでしょうか。

もともとfunctionで条件を書いていたのですが、うまくいかなかったため、質問2，3を消すコードだけ残しています。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
8  <link rel="stylesheet" href="style.css">
9
10  <title>test2pages</title>
11
12</head>
13<body>
14
15
16
17  <div id="app">
18
19    <div class="body">
20
21      <div class="title">
22        <div class="step">STEP2</div>
23        <h3>以下にお答えください</h3>
24      </div>
25      <div class="main">
26
27        <p class="content">現在生命保険に加入されていますか?</p>
28        <div class="radio">
29          <label><input type="radio" v-model="radio" value="yes">はい</label>
30          <label><input type="radio" v-model="radio" value="no">いいえ</label>
31        </div>
32        <br>
33        <div v-show="show2" class="content">
34          <p>現在入院中ですか。または、最近3ヶ月以内に医師の診察、検査の結果、入院、手術を進められたことはありますか？</p>
35          <input type="radio" v-model="radio2" value="yes">はい
36          <input type="radio" v-model="radio2" value="no">いいえ
37        </div>
38
39        <br>
40        <div v-show="show3" class="content">
41          <p>過去5年以内に、病気やけがで、手術をうけたことまたは継続して7日以上の入院をしたことがありますか？</p>
42          <input type="radio" v-model="radio3" value="yes">はい
43          <input type="radio" v-model="radio3" value="no">いいえ
44        </div>
45      </div>
46    </div>
47
48
49    <button @click="backButton">前へ戻る   ➤</button>
50    <button @click="nextButton">次へ進む   ➤</button>
51
52  </div>
53
54  <script src="main.js"></script>
55
56
57</body>
58
59</html>

js
1'use strict';
2
3 let vue = new Vue({
4   el:'#app',
5   data:{
6     radio:'はい',
7     radio2:'',
8     radio3:'',
9     show2:false,
10     show3:false,
11     nextButton:'',
12     backButton:'',
13   }
14    
15  });

どのようなコードを付け足せば、回答を押した際に次の質問が出てくるようになるのでしょうか。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

どのようなコードを付け足せば、回答を押した際に次の質問が出てくるようになるのでしょうか。

v-showやv-ifには条件式を指定することも可能です。currentQuestion == 問題番号の条件を指定してやればcurrentQuestionが該当の問題番号と等しい場合だけ表示するという動作になります。
あとはラジオボタンの選択や下部ボタンのクリック時にcurrentQuestionを増減させてやるだけで自動的に問題の表示が切り替わります。

ちなみにこの場合は v-show、v−if のどちらを使っても見た目の動作は変わりません。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
7  <link rel="stylesheet" href="style.css">
8  <title>test2pages</title>
9</head>
10<body>
11
12  <div id="app">
13
14    <div class="body">
15      
16      <div class="title">
17        <div class="step">STEP2</div>
18        <h3>以下にお答えください</h3>
19      </div>
20      
21      <div class="main">
22        <div v-show="currentQuestion == 1" class="content">
23          <p>現在生命保険に加入されていますか?</p>
24          <label><input type="radio" v-model="radio" value="yes" @click="nextButton()">はい</label>
25          <label><input type="radio" v-model="radio" value="no"  @click="nextButton()">いいえ</label>
26        </div>
27        
28        <div v-show="currentQuestion == 2" class="content">
29          <p>現在入院中ですか。または、最近3ヶ月以内に医師の診察、検査の結果、入院、手術を進められたことはありますか？</p>
30          <label><input type="radio" v-model="radio2" value="yes" @click="nextButton()">はい</label>
31          <label><input type="radio" v-model="radio2" value="no"  @click="nextButton()">いいえ</label>
32        </div>
33
34        <div v-show="currentQuestion == 3" class="content">
35          <p>過去5年以内に、病気やけがで、手術をうけたことまたは継続して7日以上の入院をしたことがありますか？</p>
36          <label><input type="radio" v-model="radio3" value="yes" @click="nextButton()">はい</label>
37          <label><input type="radio" v-model="radio3" value="no"  @click="nextButton()">いいえ</label>
38        </div>
39      </div>
40      
41    </div>
42    <br>
43
44    <button @click="backButton">前へ戻る   ➤</button>
45    <button @click="nextButton">次へ進む   ➤</button>
46
47  </div>
48
49<script>
50'use strict';
51
52 let vue = new Vue({
53   el:'#app',
54   data:{
55     currentQuestion:1,
56     radio:'',
57     radio2:'',
58     radio3:'',
59   },
60   methods:{
61     nextButton:function(){ this.currentQuestion++; if (this.currentQuestion > 3) { this.currentQuestion = 3; } },
62     backButton:function(){ this.currentQuestion--; if (this.currentQuestion < 1) { this.currentQuestion = 1; } },
63   }
64  });
65
66</script>
67
68
69</body>
70
71</html>

投稿2021/07/08 11:00

ku__ra__ge

総合スコア4524

yukiman

2021/07/09 03:01

ku__ra__geさん　回答ありがとうございます！ ``` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <link rel="stylesheet" href="style.css"> <title>test2pages</title> </head> <body> <div id="app"> <div class="body"> <div class="title"> <div class="step">STEP2</div> <h3>以下にお答えください</h3> </div> <div class="main"> <div v-show="show == 1" class="content"> <p>現在生命保険に加入されていますか?</p> <label><input type="radio" v-model="radio" value="yes" @click="next()">はい</label> <label><input type="radio" v-model="radio" value="no" @click="next()">いいえ</label> </div> <br> <div v-show="show == 2" class="content"> <p>現在入院中ですか。または、最近3ヶ月以内に医師の診察、検査の結果、入院、手術を進められたことはありますか？</p> <label><input type="radio" v-model="radio2" value="yes" @click="next()">はい</label> <label></label><input type="radio" v-model="radio2" value="no" @click="next()">いいえ</label> </div> <br> <div v-show="show == 3" class="content"> <p>過去5年以内に、病気やけがで、手術をうけたことまたは継続して7日以上の入院をしたことがありますか？</p> <label><input type="radio" v-model="radio3" value="yes" @click="next()">はい</label> <label><input type="radio" v-model="radio3" value="no" @click="next()">いいえ</label> </div> </div> </div> <button @click="backButton">前へ戻る ➤</button> <button @click="nextButton">次へ進む ➤</button> </div> <script src="main.js"></script> </body> </html> ``` ``` 'use strict'; let vue = new Vue({ el:'#app', data:{ radio:'', radio2:'', radio3:'', show:1, nextButton:'', backButton:'', methods:{ next:function(){ this.show++; if (this.show > 3) { this.show = 3; } } } } }); ``` backボタンは省略したかったので、上記のような記述で書いたのですが ’はい’、’いいえ’を押すと [Vue warn]: Property or method "next" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. と [Vue warn]: Error in v-on handler: "TypeError: next is not a function" と vue.js:1906 TypeError: next is not a function at click (eval at createFunction (vue.js:11698), <anonymous>:3:500) at invokeWithErrorHandling (vue.js:1872) at HTMLInputElement.invoker (vue.js:2197) at HTMLInputElement.original._wrapper (vue.js:7591) とエラー文が3つ出てきてしまうのですが、なぜでしょうか。。