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

by

0👍

✅

You don’t need a ref, you can change the value of selected2 directly because it’s not a prop, but a data field. Remove the reference in your component, like so:

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

and change your onChange method to this (you don’t need the else block as well):

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

Try it. I’ve tested it and it works.

0👍

I think the best way is to watch the 2-way-binding (selected) with a watcher.
See: https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watch

And if the value changes you can check if the new value is ‘subscription’.

And to select the wante option in the 2nd select you just have to asign the wanted value to the 2-way-binding (selected2). And for disabling set isDisabled to true.

Leave a comment