How to get selected item of b-form-select with Vue.js. v-on:change does nothing?

Question

I just want to get the selected item of the <b-form-select> which I want to use for an api call. It looks like v-on:change does nothing, but it was the solution here: https://stackoverflow.com/a/31273611/8743351

When I use console.log(this.selected); I expect the selected value, but instead I get undefined.

There are so many different ways to solve this but nothing worked for me.

<!-- Export -->
<b-navbar toggleable type="light" variant="light">
  <b-nav is-nav-bar>
    <b-nav-item>
      <b-form-select v-model="selected" v-on:change="getSelectedItem" style="width:auto">
        <template slot="first">
              <option :value="null" disabled>-- Select project --</option>
            </template>
        <option v-for="project in projects" v-bind:value="project.value">
          {{ project.id }} {{ project.title }}
        </option>
      </b-form-select>
    </b-nav-item>
  </b-nav>

  <b-nav is-nav-bar>
    <b-nav-item>
      <b-button v-on:click="exportXML();">Export as XML</b-button>
    </b-nav-item>
  </b-nav>
</b-navbar>

methods: {
  getSelectedItem: function() {
    console.log(this.selected);
  },
  exportXML: function() {
    console.log(this.selected);
    this.$http.get(
      'http://localhost:8080/api/exports/' + this.selected,
    });
}
}

Answer 1

If only interested in the event argument:

In .html

<b-form-select 
    v-model="someobject.state"   <!--This is only used to bind the UI to data for display. In this case the state of the object. It can be anything in the VUE app's context, aka data:{}-->
    v-on:change="getSelectedItem" <!--will call the func getSelectedItem with 1 argument, the value of the newly selected item.-->
/>

In .js:

....
methods: {
      getSelectedItem: function(myarg) { // Just a regular js function that takes 1 arg
        console.log(myarg);
      },
....

If want to pass multiple arguments including the Event argument:

In .html

<b-form-select 
    v-model="someobject.state"  <!--This is only used to bind the UI to data for display. In this case the state of the object. It can be anything in the VUE app's context, aka data:{}-->
    v-on:change="getSelectedItem($event, someobject.id)" <!--will call the func getSelectedItem with 2 arguments, the value of the newly selected item, and the id of a previously defined object.-->
/>

In .js:

....
methods: {
      getSelectedItem: function(newObjectState, objectId) { // Just a regular js function that takes 2 args
        console.log(newObjectState + " --- " + objectId);
        updateObjectState(objectId, newObjectState)

      },
....

Answer 2

If anyone stumbles across this, I believe the problem is that the v-on:change is grabbing the value too soon before its been updated. So the result is undefined. If you were to click on another option, you should see that the old value from previous click becomes visible.

I just solved a similar problem. I included the use of debounce to wait to execute the on change method.

That is what is implemented here https://www.reddit.com/r/vuejs/comments/5xb9tj/input_call_a_method_but_with_debounce/

You'll also need to npm install loadash and include "import _ from 'lodash'" in the portion.