Question

我正在使用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并将其更改为“ no”，则应该再次禁用radio2。然而，通过此设置，radio3仍处于启用状态。我基本上需要它，以便如果将单选设置为否，则应禁用以下所有单选按钮。如果设置为是，则下一个收音机应该启用。

我如何实现这样的目标？

谢谢

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>

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

1 个答案: