1

I have a quiz made in Vue, which shows questions one at a time based on the index of a questions array. Example html for an individual question:

<h3>Is this a question?</h3>

<label><input type="radio" name="option" value="option">Yes</label>
<label><input type="radio" name="option" value="option">Maybe</label>
<label><input type="radio" name="option" value="option">No</label>

<button type="button" class="btn btn-default">Next question</button>

What I want to achive is to disable the Next Question button when the user has not clicked any of the radio buttons (for this specific indexed question). I got it working using a v-model but when I clicked the button, it didn't work for the next question within the array that popped up. Anyone that can help me out?

bhbdhdhj
  • 41
  • 4
  • Could you post your `v-model` demo? – yuriy636 Jul 08 '18 at 21:50
  • @yuriy636 Thanks for your reply man. I removed it to be honest, it wasn't much. Just a v-model called "checked" on a radio option and declaring :disabled="!checked" on the Next button. – bhbdhdhj Jul 08 '18 at 21:53
  • Possible duplicate of [Using Vee-validate to disable button until form is filled out correctly](https://stackoverflow.com/questions/47178484/using-vee-validate-to-disable-button-until-form-is-filled-out-correctly) – Ali Heikal Jul 08 '18 at 22:04
  • Do you store your answer once the next button is clicked or when the radio button is selected? – arapl3y Jul 09 '18 at 01:33

2 Answers2

0

I think a good option would be to pass an id parameter to the button element (DOM), and use this in your array to mark a question as filled/open and also show/hide the button.

Laravelmeester
  • 26
  • 3
0

Here you go man, use v-model.

<h3>Is this a question?</h3>

<label><input type="radio" name="option" value="option" v-model="radioValue">Yes</label>
<label><input type="radio" name="option" value="option" >Maybe</label>
<label><input type="radio" name="option" value="option" v-model="radioValue">No</label>

<button type="button" class="btn btn-default" :disabled="!radioValue">Next question</button>

I hope it helps.

Ankit Kumar Ojha
  • 2,296
  • 2
  • 22
  • 30