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

This should be working can you post the rest of your component script? — thanksd, Oct 17 '17 at 12:53

score 10 · Answer 1 · answered Oct 18 '18 at 19:24

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)

      },
....

This should be the answer. Thank you! – Michi-2142 Aug 14 '19 at 12:50 — Michi-2142, Aug 14 '19 at 12:50

theDust · Answer 2 · 2018-03-15T01:22:06.563

1

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.

edited Mar 15 '18 at 01:22

answered Mar 13 '18 at 07:15

theDust

43
1
6

Same problem, is there a way to pass the current selected value with the onChange method and NOT use the global data variable? – KasparTr Apr 25 '18 at 06:03
Hey @KasparTr, I think it would be possible by using a watcher. It's useful for performing async tasks. https://vuejs.org/v2/guide/computed.html#Watchers – theDust Apr 27 '18 at 05:13

score 0 · Answer 3 · edited Oct 17 '21 at 02:02

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

score 0 · Answer 4 · answered May 05 '18 at 04:56

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.

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

4 Answers4