Радио кнопкане проверяется (становится синим) - PullRequest
Новая
       63

Радио кнопкане проверяется (становится синим)

0 голосов
/ 14 октября 2019

Я использую Bootstrap-vue.JS, чтобы создать группу радиокнопок. У меня есть функция сброса, чтобы проверить один из переключателей. когда я вызываю функцию, значение радиокнопки меняется, как я и ожидал, но сама радиокнопка не показывает, что она изменилась (кружок не становится синим)

вот шаблон 

<b-row md="9" align-h="center">
 <b-form-group>
  <b-form-radio-group
   id="radio-group-1"
   v-model="voc_type"
   name="radio-options"
  >
   <b-form-radio value="Request">Request</b-form-radio>
   <b-form-radio value="Complain">Complain</b-form-radio>
   <b-form-radio value="Saran">Saran</b-form-radio>
   <b-form-radio value="Pujian">Pujian</b-form-radio>
  </b-form-radio-group>
 </b-form-group>
</b-row>
{{ voc_type }}

Вот инициализация при создании vue 

export default{
 data{
  return{
   voc_type: 'Request',
  }
 }
}

Вот функция сброса 

reset(){
 this.voc_type= 'Request'
}

когда я вызываю reset(), вывод {{ voc_type }} - это «Запрос», как я и ожидал, но переключатель не становится синим. idk почему ..

1 Ответ

0 голосов
/ 14 октября 2019

Я реализовал кнопки сброса, теперь они работают как положено: 

<template>
  <div>
    <b-row md="9" align-h="center">
      <b-form-group>
        <b-form-radio-group id="radio-group-1" v-model="voc_type" name="radio-options">
          <b-form-radio value="Request">Request</b-form-radio>
          <b-form-radio value="Complain">Complain</b-form-radio>
          <b-form-radio value="Saran">Saran</b-form-radio>
          <b-form-radio value="Pujian">Pujian</b-form-radio>
        </b-form-radio-group>
      </b-form-group>
    </b-row>
    {{ voc_type }}
    <b-btn @click="reset()">Reset</b-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      voc_type: 'Request'
    };
  },
  methods: {
    reset() {
      this.voc_type = 'Request';
    }
  }
};
</script>

В вашей функции данных есть опечатка, из-за которой реактивность Vue, вероятно, не работала корректно 

  data() { <-- correct this line 
    return {
      voc_type: 'Request'
    };
  },
...