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

Question

我正在尝试制作一个有条件的 select-box。有 2 个 select-框。当 select-box1 1 的值发生变化时，第二个 select-box 的值自动需要 selected 到一个值，它也将被禁用。

到目前为止，我能够执行条件 select，其中 select-box 1 的选项更改 select-box2 中的值，但它在 vue 中显示错误。错误是--

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

此外，我可以禁用第二个 select-框，但是当我使用动态禁用时，该值未设置。

问题简述：

1st selectbox has value-- a)one time payment & b)subscription and

2nd selectbox has value--a)held & b) Immediate.

Now, if 1st selectbox's subscription is selected then in the 2nd selectbox, it should be set to immediate and also get disabled.

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

如果有更好的实现方法，欢迎分享...

Answer 1

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

如果值发生变化，您可以检查新值是否为 'subscription'。

对于 select 第二个 select 中的 wante 选项，您只需将所需的值分配给双向绑定 (selected2)。对于禁用设置 isDisabled 为 true。

Answer 2

你不需要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;
  }
},

试试吧。我已经测试过它并且有效。

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

How to conditionally set a bootstrap-vue select box value when another select box value selected in vuejs?

vue.js

vuejs2

bootstrap-vue