在 Vue3 中，如何檢查從一組單選按鈕中檢查的每個單選按鈕的值？

Question

我剛剛開始使用 Vue3 進行培訓，並且非常喜歡它。 但是我遇到了一些使用香草 JS 似乎更容易（直觀）的問題。

我有這組具有相同name值的單選按鈕

<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>

我可以使用 v-model 輸出值，這很好......而且我還可以獲得 CSS 樣式的檢查值......所以沒關系..

但是，當檢查一個輸入字段（單選按鈕）時，我會假設該按鈕的ON值定義了狀態（也許我在這個假設中是錯誤的）......但是在我的代碼中，如果我點擊它轉換為的任何按鈕ON但其他按鈕也保持為ON .. 我會假設如果按鈕被選中，那么它將是ON ，如果不是，那么它將是......也許為null ？ 還是false ？ 我不知道...

我添加了一個名為@change的showCheckedValue函數，但不知道如何使其工作......

這是我要測試的腳本和樣式設置...我什至嘗試將v-model= "voted"更改為每個按鈕都有一個不同的按鈕，例如v-model="voted1"和v-model="voted2"等等上..但這也沒有用..

所以這里的問題是如何輸出或復制一組單選按鈕的檢查值？ 如果其中一個被選中，它應該是true或on而其他的應該是false或null ？

這是我在 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

您需要為每個radio button指定一個value ，以便voted ref可以與之綁定。

請檢查代碼筆