Vue проверить несколько переключателей

Question

Я пытаюсь проверить несколько переключателей в vue, но это не работает. Обычный html позволяет проверять несколько переключателей, если атрибуты имени отличаются, но это не работает в vue

  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>