CODEWITHSUNDEEP
javascripttwitter-bootstrapselectvuejs2
C. Oltan
C. Oltan

Reputation: 121

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

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

Upvotes: 5

Views: 24204

Answers (4)

C. Oltan
C. Oltan

Reputation: 121

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

Upvotes: 0

eriel marimon
eriel marimon

Reputation: 1380

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)

      },
....

Upvotes: 10

Rosdi Kasim
Rosdi Kasim

Reputation: 25956

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.

Upvotes: 0

theDust
theDust

Reputation: 43

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.

Upvotes: 1

Related Questions