如何有条件地设置一个引导值选择框的值，当另一个选择框的值选择在vejs ?

Question

我正在尝试创建一个条件选择框。有2个选择框。当select-box1的值发生变化时，第二个选择框的值需要自动被选中，并且它也将被禁用。

到目前为止，我能够做条件选择，其中选择框1的选项在选择框2中改变值，但它在值中显示错误。错误——

[Vue warn]:避免直接改变prop，因为当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的data或computed属性。道具正在发生变化:"value">

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

简单提问:

1. 第一个选择框有值——a)一次性付款&b)订阅和
2. 第二个选择框有值——a)保持&b)立竿见影。

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

下面是代码沙箱链接——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

我认为最好的方法是用监视器监视双向绑定(选定的)。
参见:https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watch

如果值改变了，你可以检查新值是否为'subscription'

要在第二次选择中选择想要的选项，您只需将想要的值分配给双向绑定(selected2)。如果要禁用，将isDisabled设置为true。