Using Bootstrap Vue to select and send the previous value

Question

Using Bootstrap Vue to select and send the previous value

Here is the code I am using for a select input in Vue Bootstrap:

<b-form-select v-model="selectedgroup" class="mb-3"  @change="searchSubGroup()">
    <option :value="null">Select a group</option>
    <option v-for="group in groupItem" :value="group.id">
        {{group.nome}}
    </option>
</b-form-select>

Whenever the searchSubGroup() method is triggered by the @change event, it passes the previous value of selectedgroup. For example, if I first select an option with value = 1, the method will be called with selectedgroup as null, then if I select another option with value = 2, the method will be called with selectedgroup as 1.

searchSubGroup(){ 
  this.axios.get("http://chart.solutions/public/api/produto/subgroup/search/" + this.selectedgroup + "/").then(response => {
        if (response.data.erro) {
            //console.log("subgroup doesnt exist")
        }else{
            this.subGroupItem = response.data;
        }
    })
}

javascript vue.js vuejs2 vue-component bootstrap-vue

Answer 1

Answer №1

To enhance your code, make sure to call the searchSubGroup method without using parentheses, so that the newly selected value is automatically passed to the function.

<b-form-select v-model="selectedgroup" class="mb-3"  @change="searchSubGroup">
    <option :value="null">Select a group</option>
    <option v-for="group in groupItem" :value="group.id">
        {{group.nome}}
    </option>
</b-form-select>

In your method, ensure you follow these steps:

searchSubGroup(value){ 
  this.axios.get("http://chart.solutions/public/api/produto/subgroup/search/" + value + "/").then(response => {
        if (response.data.erro) {
            //console.log("subgroup doesnt exist")
        }else{
            this.subGroupItem = response.data;
        }
    })
}

Answer 2

To enhance your code, make sure to call the searchSubGroup method without using parentheses, so that the newly selected value is automatically passed to the function.

<b-form-select v-model="selectedgroup" class="mb-3"  @change="searchSubGroup">
    <option :value="null">Select a group</option>
    <option v-for="group in groupItem" :value="group.id">
        {{group.nome}}
    </option>
</b-form-select>

In your method, ensure you follow these steps:

searchSubGroup(value){ 
  this.axios.get("http://chart.solutions/public/api/produto/subgroup/search/" + value + "/").then(response => {
        if (response.data.erro) {
            //console.log("subgroup doesnt exist")
        }else{
            this.subGroupItem = response.data;
        }
    })
}

Answer 3

Answer №2

To fix the issue, make sure you exclude the parentheses from the @change call like this:

@change="searchSubGroup"

If you keep the parentheses in place, the function will be triggered during the component build process when "selectedgroup" is still undefined, resulting in a call with null.

The problem arises because v-model relies on @change, causing the event to fire twice. The selectedGroup method is executed before the change method updates the v-model data, leading to the use of the "old value."

While another answer provides a solution to work around the problem, it lacks an explanation for why this behavior occurs.

Here's an alternative approach:

Remove the @change call from b-form-select

Add a "watched" property

watch: {
     selectedgroup(value) {
          this.searchSubGroup();
          //OR you could remove the method and just call axios here
     })
}

Answer 4

To fix the issue, make sure you exclude the parentheses from the @change call like this:

@change="searchSubGroup"

If you keep the parentheses in place, the function will be triggered during the component build process when "selectedgroup" is still undefined, resulting in a call with null.

The problem arises because v-model relies on @change, causing the event to fire twice. The selectedGroup method is executed before the change method updates the v-model data, leading to the use of the "old value."

While another answer provides a solution to work around the problem, it lacks an explanation for why this behavior occurs.

Here's an alternative approach:

Remove the @change call from b-form-select

Add a "watched" property

watch: {
     selectedgroup(value) {
          this.searchSubGroup();
          //OR you could remove the method and just call axios here
     })
}

Answer 5

Answer №3

You might want to consider using @input instead of the @change event because @input="searchSubGroup" will give you the currently selected item.

new Vue({
  el: '#app',

  data() {
    return {
      selected: null,
      options: [{
          value: null,
          text: 'Please select an item'
        },
        {
          value: 'a',
          text: 'Option a'
        },
        {
          value: 'b',
          text: 'Default Selected Option b'
        },
        {
          value: 'c',
          text: 'Option c'
        },
        {
          value: 'd',
          text: 'This one is disabled',
          disabled: true
        },
        {
          value: 'e',
          text: 'Option e'
        },
        {
          value: 'f',
          text: 'Option f'
        }
      ]
    }
  },
  methods: {
    choose() {
      console.log(this.selected)
    }
  }

});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  ...
  // Add necessary scripts and links
  ...

</head>

<body>

  <div id="app">

    <b-form-select v-model="selected" :options="options" class="mb-3" @input="choose">
    </b-form-select>
    <div>Selected: <strong>{{ selected }}</strong></div>
  </div>

  <script src="script.js"></script>
</body>

</html>

Answer 6

You might want to consider using @input instead of the @change event because @input="searchSubGroup" will give you the currently selected item.

new Vue({
  el: '#app',

  data() {
    return {
      selected: null,
      options: [{
          value: null,
          text: 'Please select an item'
        },
        {
          value: 'a',
          text: 'Option a'
        },
        {
          value: 'b',
          text: 'Default Selected Option b'
        },
        {
          value: 'c',
          text: 'Option c'
        },
        {
          value: 'd',
          text: 'This one is disabled',
          disabled: true
        },
        {
          value: 'e',
          text: 'Option e'
        },
        {
          value: 'f',
          text: 'Option f'
        }
      ]
    }
  },
  methods: {
    choose() {
      console.log(this.selected)
    }
  }

});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  ...
  // Add necessary scripts and links
  ...

</head>

<body>

  <div id="app">

    <b-form-select v-model="selected" :options="options" class="mb-3" @input="choose">
    </b-form-select>
    <div>Selected: <strong>{{ selected }}</strong></div>
  </div>

  <script src="script.js"></script>
</body>

</html>

Using Bootstrap Vue to select and send the previous value

Answer №1

Answer №2

Answer №3

Similar questions

Encountering an Invalid Form Body error (DiscordAPIError[50035]) while attempting to register my commands on Discord

How to retrieve the column names of a table using Web SQL?

What is the best way to incorporate a webpack bundle into another bundle?

I'm curious about using NextJS to fetch an API with a specific router ID. Can anyone provide guidance on how to achieve this and then render the data as HTML?

The Jqueryui image link is not displaying the image despite no error being reported

Sending data from a PHP function to an AJAX call in the form of an associative array using json_encode() does not

I attempted to access data from the phpmyadmin database, but the browser is displaying an error message stating "cannot get/employee", while there are no errors showing in the command prompt

Capturing user input upon submission of a form?

What is the best way to apply a class to a button in Angular when clicking on

Having difficulty displaying TIFF images and incorporating them into a Fabric Object

Utilizing Vue 3 props validation in conjunction with the power of Typescript

Delay the execution of Javascript code for one hour daily over the course of a month

<dt> and <dd> have not been added after the previous element

struggling with managing an array of Vue3 refs

Navigating through external JSON data in a Node.js and Express application, and rendering the data using Jade

What is the best way to transform an Observable array containing objects into an Observable that emits the data contained within those objects?

Executing a function a specific number of times in Jquery

The system seems to be having trouble locating the password property, as it is returning a value of

The gridview fails to update when I attempt to click on the update button

Float and tap