启用基于模型值禁用单选按钮答案

【问题标题】：Enable Disable radio buttons based on models value启用基于模型值禁用单选按钮
【发布时间】：2020-03-08 09:39:16
【问题描述】：

我正在使用 Vue 引导程序，我目前有几个单选按钮。

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

我希望按顺序回答这些收音机，因此我禁用它们，直到上一个单选按钮的答案为“是”。为此，我只需检查上一个收音机的 vmodel 值

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

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

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

谢谢

【问题讨论】：

标签： vue.js vuejs2 radio-button

【解决方案1】：

这是一个利用输入事件的 sn-p。如果值更改为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>

【讨论】：