Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

198
Views
How do I select a radio button via code? (vue.js 3 & tailwind)

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!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!