Avoid stopping Bootstrap Vue's events

Question

Avoid stopping Bootstrap Vue's events

Need help with a b-form-select control in Bootstrap Vue. Trying to execute a function when the value changes, but want the option to cancel the event and keep the original value.

Complicating matters, the select is in a child component while the function is in the parent component.

The child component

public values: any[] = [
  { name: 'default'},
  { name: 'forbidden'},
  { name: 'other option' },
]

<b-form-select :value="property" @change="$emit('onPropertyChange', arguments[0])">
   <option v-for="(val, key) in values" :value="val" :key="key">{{val.Name}}</option>
</b-form-select>

The parent component:

this.property = { name: 'default' }
public onPropertyChange(newValue) {
  if (newValue.name === 'forbidden') {
    // Not changing this.property
  } else {
    // Changing it
    this.property = newValue
  }     
}

<child :property="property" @onPropertyChange="onPropertyChange"></child>

After selecting 'forbidden' in the select, I notice that the box shows the new value but both properties remain unchanged, which is desired. How do I prevent the select from updating as well?

Bootstrap Vue seems lacking a prevent modifier for change events. Even using the native event leads to the same issue.

Is my approach incorrect?

typescript vue.js vuejs2 html-select bootstrap-vue

Answer 1

Answer №1

Enhancing user experience by disabling forbidden options instead of allowing selection confusion can be achieved through a change event handler. By saving and restoring the old value using nextTick, the desired behavior can be implemented.

It is important to note that the structure of your options may not align with b-form-select. To address this, a computed property has been created to generate the correct structure and handle the disabled attribute, which is then used in the b-form-select.

new Vue({
  el: '#app',
  data: {
    selected: 'default',
    options: [{
        name: 'default',
      },
      {
        name: 'forbidden'
      },
      {
        name: 'other option'
      },
      {
        name: 'what I had before'
      },
    ]
  },
  computed: {
    selectOptions() {
      return this.options.map((opt) => ({
        text: opt.name,
        value: opt.name,
        disabled: opt.name === 'forbidden'
      }));
    }
  },
  methods: {
    onChange(newValue) {
      const oldValue = this.selected;

      if (newValue === 'what I had before') {
        this.$nextTick(() => {
          this.selected = oldValue;
        });
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">

  <b-form-select v-model="selected" :options="selectOptions" @change="onChange">
  </b-form-select>

  <div>Selected: <strong>{{selected}}</strong></div>

</div>

Answer 2

Enhancing user experience by disabling forbidden options instead of allowing selection confusion can be achieved through a change event handler. By saving and restoring the old value using nextTick, the desired behavior can be implemented.

It is important to note that the structure of your options may not align with b-form-select. To address this, a computed property has been created to generate the correct structure and handle the disabled attribute, which is then used in the b-form-select.

new Vue({
  el: '#app',
  data: {
    selected: 'default',
    options: [{
        name: 'default',
      },
      {
        name: 'forbidden'
      },
      {
        name: 'other option'
      },
      {
        name: 'what I had before'
      },
    ]
  },
  computed: {
    selectOptions() {
      return this.options.map((opt) => ({
        text: opt.name,
        value: opt.name,
        disabled: opt.name === 'forbidden'
      }));
    }
  },
  methods: {
    onChange(newValue) {
      const oldValue = this.selected;

      if (newValue === 'what I had before') {
        this.$nextTick(() => {
          this.selected = oldValue;
        });
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">

  <b-form-select v-model="selected" :options="selectOptions" @change="onChange">
  </b-form-select>

  <div>Selected: <strong>{{selected}}</strong></div>

</div>

Answer 3

Answer №2

My suggestion involves utilizing $refs and computed getter/setter functions to address the issue at hand, although it can also be accomplished with v-bind/v-on. This approach is particularly beneficial in scenarios where user confirmation is required.

<template>
    <div>
        <b-form-select
            ref="mySelect"
            v-model="choiceHandler"
            :options="selectOptions"
        >
        </b-form-select>
    </div>
</template>
<script>
export default {
    data() {
        return {
            selectOptions: [
                { value: 1, text: "Choice 1" },
                { value: 2, text: "Choice 2" },
                { value: 3, text: "Choice 3" },
            ],
            storedChoice: 3,
        };
    },
    computed: {
        choiceHandler: {
            get() {
                return this.storedChoice;
            },
            set(newValue) {
                this.$refs.typeSelect.localValue = this.storedChoice; 
                let confirmDialog = new Promise((resolve) => {
                    setTimeout(() => {
                        resolve(true);
                    }, 1500);
                });
                confirmDialog.then((res) => {
                    if (res) {
                        this.storedChoice = newValue;
                    } else console.log("No changes");
                });
            },
        },
    },
};
</script>

In order to prevent undesired changes from affecting the data model or store, we employ a setter function. Prior to validation, we revert the localValue of the b-form-select component to its original state. If validation succeeds, the data model is updated, triggering Vue to refresh the b-form-select. Otherwise, no action is taken.

Although this method may result in a Vue warning related to direct DOM manipulation, I believe it is justified in this context. It prevents the browser from displaying data that have not yet been saved in the model, rather than overriding the existing data model.

For an alternative solution using a vanilla <select> tag without BootstrapVue, as well as employing v-bind/v-on instead of getters and setters, please refer to this link.

Answer 4

My suggestion involves utilizing $refs and computed getter/setter functions to address the issue at hand, although it can also be accomplished with v-bind/v-on. This approach is particularly beneficial in scenarios where user confirmation is required.

<template>
    <div>
        <b-form-select
            ref="mySelect"
            v-model="choiceHandler"
            :options="selectOptions"
        >
        </b-form-select>
    </div>
</template>
<script>
export default {
    data() {
        return {
            selectOptions: [
                { value: 1, text: "Choice 1" },
                { value: 2, text: "Choice 2" },
                { value: 3, text: "Choice 3" },
            ],
            storedChoice: 3,
        };
    },
    computed: {
        choiceHandler: {
            get() {
                return this.storedChoice;
            },
            set(newValue) {
                this.$refs.typeSelect.localValue = this.storedChoice; 
                let confirmDialog = new Promise((resolve) => {
                    setTimeout(() => {
                        resolve(true);
                    }, 1500);
                });
                confirmDialog.then((res) => {
                    if (res) {
                        this.storedChoice = newValue;
                    } else console.log("No changes");
                });
            },
        },
    },
};
</script>

In order to prevent undesired changes from affecting the data model or store, we employ a setter function. Prior to validation, we revert the localValue of the b-form-select component to its original state. If validation succeeds, the data model is updated, triggering Vue to refresh the b-form-select. Otherwise, no action is taken.

Although this method may result in a Vue warning related to direct DOM manipulation, I believe it is justified in this context. It prevents the browser from displaying data that have not yet been saved in the model, rather than overriding the existing data model.

For an alternative solution using a vanilla <select> tag without BootstrapVue, as well as employing v-bind/v-on instead of getters and setters, please refer to this link.

Avoid stopping Bootstrap Vue's events

Answer №1

Answer №2

Similar questions

Union does not contain the specified property in Typescript

Is it possible to utilize a const as both an object and a type within TypeScript?

Rotate object within HTML table

Incorporate a Vue directive based on a certain condition

The Angular 9 custom directive is malfunctioning on mobile devices

Error encountered while attempting to retrieve an environment variable: Invalid token found

Refresh a page automatically upon pressing the back button in Angular

Discovering latitude and longitude coordinates from a map URL, then enhancing dynamism by utilizing the coordinates as parameters

What is the best way to assign table rows to various interfaces in typescript?

Encountered an error while attempting to compare 'true' within the ngDoCheck() function in Angular2

Attribute specified does not belong to type 'DetailedHTMLProps<ButtonHTMLAttributes

Deploying Vue.js applications

TypeScript encountered an error with code TS2554, indicating that it was expecting 0 arguments but instead received 1 in an Ionic application

Styling with Radial Gradients in CSS

Apply CSS styles conditionally to an Angular component

Alter the Vue view using an object instead of the url router

"Utilizing jQuery and Bootstrap 4 in TypeScript, attempting to close modal window using jQuery is not functioning

Encountering a promise error when using TypeScript and React Lazy

Testing vue.js components through vue-loader with dependency injection

Lazy-loaded modules in Angular that contain services provided within the module