Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

204
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda