iView‐Radio Button - daniel-qa/Vue GitHub Wiki

#

<Radio-group v-model="button1" type="button">
	<Radio label="北京"></Radio>
	<Radio label="上海"></Radio>
	<Radio label="深圳"></Radio>
	<Radio label="杭州"></Radio>
</Radio-group>
  • 未更新選取狀態

selectedSchoolId 可能型別不合: string / number

school.id = 1 // number

selectedSchoolId = '' // string

<Radio-group
  v-model="selectedSchoolId"
  type="button"
  :key="'school-radio-' + selectedSchoolId"
>
  <Radio
    v-for="school in sharedFromSchoolsList"
    :key="school.id"
    :label="school.id"
  >
    {{ school.name }}
  </Radio>
</Radio-group>

:key="'school-radio-' + selectedSchoolId"

這一行代表什麼？

每次 selectedSchoolId 改變，整個 Radio-group 都會被 Vue 當成「新元件」重建

這通常是為了：

強制重新渲染，解決「資料換了但 UI 沒更新」的問題

iView 的 有支援 type="button" 和 label，但 沒有直接提供 block 類型。 不過 裡的每個 都是行內元素，我們可以用 CSS 讓它變成 block。

  • 每個 Radio 都變成獨立一行
<template>
  <div>
    <Radio-group v-model="selectedOption">
      <Radio label="金斑蝶" disabled class="radio-block"></Radio>
      <Radio label="爪哇犀牛" class="radio-block"></Radio>
      <Radio label="印度黑羚" class="radio-block"></Radio>
    </Radio-group>

    <Radio v-model="disabledSingle" disabled class="radio-block">Radio</Radio>

  </div>
</template>

<script>
export default {
  data () {
    return {
      disabledSingle: true,
      selectedOption: '爪哇犀牛'
    }
  }
}
</script>

<style>
.radio-block {
  display: block;
  margin-bottom: 6px; /* 可加可不加，看你爽度 */
}
</style>

  • Radio-group : 綁定整組選項的選取結果

  • v-model 綁定單選按鈕的值 (被選中 ⇒ true，沒選 ⇒ false)

< RadioGroup>，預設就是「只能選一個」的互斥選項組。

⚠️ **GitHub.com Fallback** ⚠️