当在 vuejs 中选择另一个选择框值时，如何有条件地设置 bootstrap-vue 选择框值？

Question

我正在尝试制作一个条件选择框。有 2 个选择框。当 select-box1 1 的值发生变化时，第二个选择框的值会自动被选择为一个值，它也会被禁用。

到目前为止，我能够进行条件选择，其中选择框 1 的选项更改了选择框 2 中的值，但它在 vue 中显示错误。 错误是--

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“价值”

另外，我可以禁用第二个选择框，但是当我使用动态禁用时，该值不会被设置。

简单的问题：

1. 第一个选择框具有价值--a)一次性付款 & b)订阅和
2. 第二个选择框有值--a)hold & b) Immediate.

现在，如果第一个选择框的订阅被选中，那么在第二个选择框中，它应该被设置为立即并且也被禁用。

以下是代码沙箱链接-- https://codesandbox.io/s/conditional-select-forked-h61po?file=/src/components/HelloWorld.vue

如果有更好的方法可以实现这一点，请随时分享...

Answer 1

您不需要ref，您可以直接更改selected2 的值，因为它不是道具，而是数据字段。删除组件中的引用，如下所示：

<b-form-select
  v-model="selected2"
  :options="options2"
  :disabled="isDisabled"
></b-form-select>

并将您的 onChange 方法更改为此（您也不需要 else 块）：

onChange(event) {
  if (event === "subscription") {
    this.selected2 = "Immediate";
    this.isDisabled = true;
  }
},

试试看。我已经测试过了，它可以工作。

Answer 2

我认为最好的方法是与观察者一起观看 2-way-binding (selected)。
见：https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watch

如果值发生变化，您可以检查新值是否为“订阅”。

要在第二次选择中选择wante 选项，您只需将想要的值分配给2-way-binding (selected2)。并且对于禁用设置 isDisabled 为 true。