Как проверить радио-кнопки в b-form-radio-group в vuejs - PullRequest
Новая
       17

Как проверить радио-кнопки в b-form-radio-group в vuejs

0 голосов
/ 05 июля 2019

У меня есть группа радио-кнопок b-form-radio, как я могу проверить их, так как одна из них должна быть проверена?

Здесь находится div b-form-radio-group внутриb-modal 

<b-modal id="manageQuantity" title="Manage Quantity" @ok="updateQuantity">
<div class="radio-button">
            <b-form-group
              id="quantityOption"
              label-cols-sm="3"
              label="Option :"
              label-for="input-horizontal"
            >
              <b-form-radio-group
                id="quantityOption"
                class="individual-button"
                buttons
                button-variant="outline-secondary"
                v-model="form.quantityOption"
                :options="quantityOptions"
              ></b-form-radio-group>
            </b-form-group>
            </div>
</b-modal>

Когда я нажимаю кнопку «ОК», b-modal должен предупредить меня, если я не выбрал ни один из переключателей.

Ответы [ 2 ]

1 голос
/ 05 июля 2019

Вам необходимо добавить state свойство. Вы также можете использовать слоты b-form-invalid-feedback b-form-valid-feedback для сообщений: 

<b-form-radio-group
    id="quantityOption"
    class="individual-button"
    buttons
    button-variant="outline-secondary"
    v-model="form.quantityOption"
    :options="quantityOptions"
    :state="state"
>
    <b-form-invalid-feedback :state="state">Please select one</b-form-invalid-feedback>
    <b-form-valid-feedback :state="state">Thank you</b-form-valid-feedback>
</b-form-radio-group>



....
data(){
    return{
        form:{
            quantityOption: null            
        }
    }
}
...
computed: {
    state() {
        return Boolean(this.form.quantityOption)    
    }
}
...

Вы можете найти больше в документации: https://bootstrap -vue.js.org / docs / components / form-radio / # contextual-state-with-feedback-example

0 голосов
/ 05 июля 2019

В вашем методе updateQuantity вы можете проверить, установлен ваш quantityOption или нет.

Вы также можете реализовать ответ Андрея для более наглядного представления, но вам все еще нужна проверка в событии, чтобыубедитесь, что он установлен или нет. 

<div>
  <b-btn v-b-modal.modal>Open Modal</b-btn>
  <b-modal id="modal" @ok="updateQuantity">
    <b-form-radio-group
    buttons
    button-variant="outline-secondary"
    v-model="form.quantityOption"
    :options="quantityOptions"
    ></b-form-radio-group>
  </b-modal>
</div>



<script>
  data() {
    return {
      form: { quantityOption: null },
      quantityOptions: [ 
        {value: 1, text: '1' },
        {value: 2, text: '2' },
        {value: 3, text: '3' }
      ]
    }
  },
  methods: {
    updateQuantity(event) {
      if(!this.form.quantityOption){
        alert('Please select one of the options first')
        event.preventDefault()
      }
    }
  }
</script>
...