vue.js 未选中单选按钮< b-form-radio-group>(变为蓝色)

ar7v8xwq  于 2023-01-21  发布在  Vue.js
关注(0)|答案(2)|浏览(114)

我正在使用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 }}的输出如我所料是“Request”,但是单选按钮没有变成蓝色。

u7up0aaq

u7up0aaq1#

我实现了一个重置按钮,它的工作原理和预期的一样:

<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>

数据函数中存在排印错误,因此VueReact性可能未正确工作

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

brgchamk2#

在开发nuxt应用程序的过程中,我发现了一种非常简洁的方式来使用b-form-radio按钮。

<template>
  <div>
    <b-form-group>
      <b-form-radio-group v-model="selectedOption" :options="options" name="name"></b-form-radio-group>
    </b-form-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' }
      ],
      selectedOption: ''
    }
  }
}
</script>

相关问题