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:

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>

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,
    });
}
}

• javascript
• twitter-bootstrap
• select
• vuejs2

• This should be working can you post the rest of your component script? – thanksd Commented Oct 17, 2017 at 12:53

4 Answers 4

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)

      },
....

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.

I am late, but I modified the function a bit like so and it works, the rest is the same:

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

Note that I am not grabbing the value from the model, instead the selected item is passed to the function.

This should be working can you post the rest of your component script? – thanksd

Actually this is all what I got and what has to do with this select form.

  export default {
    userMe: [],
    data() {
      return {
        selected: null,
        options: [],
      }
    },
    created: function() {

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