Vue 檢查多個單選按鈕

Question

我正在嘗試檢查 vue 中的多個單選按鈕，但它不起作用。 如果名稱屬性不同但它在 vue 中不起作用，則普通 html 可讓您檢查多個單選按鈕

 export default { data() { return { selected: [] } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <template> <div> <b-form-group label="Individual radios"> <b-form-radio v-model="selected" name="some-radios0" value="A">Option A</b-form-radio> <b-form-radio v-model="selected" name="some-radios1" value="B">Option B</b-form-radio> </b-form-group> <div class="mt-3">Selected: <strong>{{ selected }}</strong></div> </div> </template>

所以我更改了名稱屬性，但它仍然無法正常工作。 這太不可能了。

Answer 1

如果要選中多個復選框，則應使用b-form-checkbox-group

這是文檔的鏈接： https : //bootstrap-vue.js.org/docs/components/form-checkbox

這是您修改的代碼：

<template>
  <div>
    <b-form-group label="Checkboxes">
      <b-form-checkbox-group v-model="selected" name="some-radios">
        <b-form-checkbox value="A">Option A</b-form-checkbox>
        <b-form-checkbox value="B">Option B</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
      }
    }
  }
</script>