I want to have a confirm message when clicking on a radio button, only when confirmed i want that one to be cheked. I now got the alarm, but when denied it still checks the one clicked on. Is there a possibility to put it in the method?
Here is the code for the radio buttons:
<div class="grid grid-cols-2 m-10 max-w-md mx-auto">
<div class="relative">
<input class="sr-only peer" type="radio" value="A" name="answer" id="answer_a" @click="methodA()" checked>
<label class="flex justify-center text-white font-bold py-3 px-2 bg-lightGray rounded-l-lg cursor-pointer peer-checked:bg-darkgreen " for="answer_a">A</label>
</div>
<div class="relative">
<input class="sr-only peer" type="radio" value="B" name="answer" id="answer_SP" @click="methodB()">
<label class="flex justify-center text-white font-bold py-3 px-2 bg-lightGray rounded-r-lg cursor-pointer peer-checked:bg-darkgreen" for="answer_b">B</label>
</div>
</div>
And here are the methods for the alarms:
async methodA() {
VueSimpleAlert.confirm("Are you sure you want to select A?", "Warning", "question", {})
.then(async confirmed => {
if (confirmed) {
this.bouleanA = true;
this.$refs.answer_A.checked = false;
this.$refs.answer_B.checked = true;
} else {
this.bouleanA = false;
this.$refs.answer_A.checked = true;
this.$refs.answer_B.checked = false;
}
})
},
async methodB(){
VueSimpleAlert.confirm("Are you sure you want to select A?", "Warning", "question", {
})
.then(async confirmed => {
if (confirmed)
{ this.bouleanA = false;
this.$refs.answer_A.checked=true;
this.$refs.answer_B.checked= false;
}else {
this.bouleanA = true;
this.$refs.answer_A.checked= false;
this.$refs.answer_B.checked= true;}
})
},
the alarm works and by declining or accepting the boolean changes, but I cant get the radiobutton to change what is checked. Online I can only find tutorials on how to get a radio value, which isnt my problem.
Thanks for the help!
Your code is correct but you have not added "ref" property in the input tag.
eg:
<input ref="answer_A" class="sr-only peer" type="radio" value="A" name="answer" id="answer_a" @click="methodA()" checked>