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

Are the functions 'useEffect' and 'useCallback' being repetitively used in this case?

I find it frustrating to constantly remove node_modules and reinstall the packages just to get npm run prod to function properly

Exploring the capabilities of Laravel Webpack Mix and harnessing the power of the

What is the best way to display a Vuex state based on a function being activated?

Angular 2 allows for duplication of elements using drag and drop functionality

When using Vue2, pushing a string to an array simply replaces the existing string instead of appending it

What is the best way to implement ES2023 functionalities in TypeScript?

The SpinButton object has an undefined public property called 'value' and the public method 'focus()' is not available

Vue.js Asynchronous while loop (continuously checking backend until task completion)

JavaScript: Choosing between explicit imports and the * sign

Backend is currently unable to process the request

Exploring the Usage of sessionStorage within the <template> Tag in Vue.js

Manage the appearance of a component using props

After modifying environment variables in Vue.js, the application still refers to the previous values

Numerous access points within Vite

What is the best way to add bootstrap.min.js into a Vue JS project?

Angular 4 - Automatically scroll to specific list item based on search query input

Contact the help desk and receive information that is currently unknown

Utilizing Vue's computed properties for advanced filtering and sorting capabilities

deliver a promise with a function's value