In Vue3, how to check value of each radio button checked from a single group of radio buttons?

Question

I have just started training with Vue3 and really like it a lot. But I am stuck at some issues which seemed much easier (intuitive) with vanilla JS.

I have this group of radio buttons which have same name value

<template>
  <div class="container">
    <div class="inputs">
      <div class="input">
        <input
          id="01-01"
          v-model="voted"
          type="radio"
          name="VP-01"
          @change="showCheckedValue"
        />
        <label for="01-01">1</label>
      </div>

      <div class="input">
        <input
          id="01-02"
          v-model="voted"
          type="radio"
          name="VP-01"
          @change="showCheckedValue"
        />
        <label for="01-02">2</label>
      </div>
      <div class="input">
        <input
          id="01-03"
          v-model="voted"
          type="radio"
          name="VP-01"
          @change="showCheckedValue"
        />
        <label for="01-03">3</label>
      </div>

      <div class="input">
        <input
          id="01-04"
          v-model="voted"
          type="radio"
          name="VP-01"
          @change="showCheckedValue"
        />
        <label for="01-04">4</label>
      </div>
      <div class="input">
        <input
          id="01-05"
          v-model="voted"
          type="radio"
          name="VP-01"
          @change="showCheckedValue"
        />
        <label for="01-05">5</label>
      </div>
    </div>

    <div class="checked">
      <div class="one">Checked value of 1 : {{ voted }}</div>
      <div class="one">Checked value of 2 : {{ voted }}</div>
      <div class="one">Checked value of 3 : {{ voted }}</div>
      <div class="one">Checked value of 4 : {{ voted }}</div>
      <div class="one">Checked value of 5 : {{ voted }}</div>
    </div>
    <div class="voted">
      {{ voted }}
    </div>
  </div>
</template>

I am able to output the value with v-model and that's fine... and I can also get the checked value for CSS styling... so that's fine..

But when one input field (radio button) is checked then I would assume that the ON value for that button defines the status (Maybe I am wrong in this assumption)... but in my code if I click on any button it converts to ON but the other buttons too stay as ON .. I would assume that if the button is checked then it would be ON and if not then it would be ... maybe null ? or false ? I am not sure...

I have added a show showCheckedValue function to be called @change but didn't know how to make it work...

Here's my script and styles setup to test... I even tried to change the v-model= "voted" to have a different one for each button like v-model="voted1" and v-model="voted2" and so on.. but that didn't work either..

So here's the question How do I output or replicate the checked value of a group of radio buttons? If one of them is checked it should be true or on and the others should be false or null ?

Here's a link to my test on codepen.. https://codepen.io/alimbolar/pen/OJvmNQB

<script setup>
import { ref } from "vue";

const voted = ref(null);
// const voted2 = ref(null);
// const voted3 = ref(null);
// const voted4 = ref(null);
// const voted5 = ref(null);
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
html {
  box-sizing: border-box;
}

#app {
  border: 1px solid red;
  margin: 50px;
  display: grid;
  place-items: center;
  height: 100vh;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
}

.inputs {
  border: 1px solid green;
  padding: 20px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.checked {
  border: 1px solid red;
  width: 100%;
  display: flex;
}

.checked > * {
  text-align: center;
  font-size: 0.8rem;
  padding: 1rem;
}

.voted {
  text-align: center;
  text-transform: uppercase;
  border: 1px solid orange;
  padding: 10px;
}

input:checked + label {
  color: red;
}
</style>

Answer 1

You need to give a value for each radio button so the voted ref can bind with it.

Please check the codepen