根据模型值启用禁用单选按钮

Question

我正在使用 Vue bootstrap，目前我有几个单选按钮。

<b-form-radio-group
    id="radio1"
    v-model="$v.form.radio1.$model"
    name="radio1"
  >
    <b-form-radio value="yes">
      Yes
    </b-form-radio>
    <b-form-radio value="no">
      No
    </b-form-radio>
</b-form-radio-group>

<b-form-radio-group
    :disabled="$v.form.radio1.$model !== 'yes'"
    id="radio2"
    v-model="$v.form.radio2.$model"
    name="radio2"
  >
    <b-form-radio value="yes">
      Yes
    </b-form-radio>
    <b-form-radio value="no">
      No
    </b-form-radio>
</b-form-radio-group>

<b-form-radio-group
    :disabled="$v.form.radio2.$model !== 'yes'"
    id="radio3"
    v-model="$v.form.radio3.$model"
    name="radio3"
    >
    <b-form-radio value="yes">
      Yes
    </b-form-radio>
    <b-form-radio value="no">
      No
    </b-form-radio>
</b-form-radio-group>

我希望按顺序回答这些无线电，所以我禁用它们，直到前一个单选按钮的回答是“是”。为此，我只需检查前一个 radio

的 vmodel 值

:disabled="$v.form.radio1.$model !== 'yes'"

这似乎可行，但我遇到了问题。如果我对所有 3 个单选按钮都回答是，然后重新访问 radio1 并将其更改为否，radio2 将再次被禁用，因为它应该是这样。然而，使用此设置，radio3 仍处于启用状态。我基本上需要它，以便如果将单选设置为否，则应禁用所有以下单选按钮。如果设置为yes，则next如下应该启用收音机。

我怎样才能实现这样的目标？

谢谢

Answer 1

这是一个利用输入事件的片段。如果该值更改为 no，它会将您定义的下一个单选按钮也更改为 no，这将触发另一个输入事件并在订单中冒泡。

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        form: {
          radio1: 'no',
          radio2: 'no',
          radio3: 'no'
        }
      }
    },
    methods: {
      onChanged(nextRadio, newValue) {
        if(newValue === 'no'){
          this.form[nextRadio] = 'no'
        }
      }
    }
  })
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.css" rel="stylesheet"/>

<div id="app">
  <b-form-radio-group
      id="radio1"
      v-model="form.radio1"
      name="radio1"
      @input="onChanged('radio2', $event)"
    >
      <b-form-radio value="yes">
        Yes
      </b-form-radio>
      <b-form-radio value="no">
        No
      </b-form-radio>
  </b-form-radio-group>

  <b-form-radio-group
      :disabled="form.radio1 !== 'yes'"
      id="radio2"
      v-model="form.radio2"
      name="radio2"
      @input="onChanged('radio3', $event)"
    >
      <b-form-radio value="yes">
        Yes
      </b-form-radio>
      <b-form-radio value="no">
        No
      </b-form-radio>
  </b-form-radio-group>

  <b-form-radio-group
      :disabled="form.radio2 !== 'yes'"
      id="radio3"
      v-model="form.radio3"
      name="radio3"
      >
      <b-form-radio value="yes">
        Yes
      </b-form-radio>
      <b-form-radio value="no">
        No
      </b-form-radio>
  </b-form-radio-group>
</div>

根据模型值启用禁用单选按钮

Enable Disable radio buttons based on models value

radio-button

vue.js

vuejs2