如何使用 Vue.js 获取 b-form-select 的选定项。 v-on:change 什么都不做？

Question

我只想获取 <b-form-select> 的选定项目，我想将其用于 api 调用。看起来 v-on:change 什么都不做，但这是这里的解决方案： https ://stackoverflow.com/a/31273611/8743351

当我使用 console.log(this.selected); 我期望选择的值，但我得到 undefined 。

有很多不同的方法可以解决这个问题，但对我来说没有任何用处。

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

原文由 C. Oltan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果只对事件参数感兴趣：

在 .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.-->
/>

在 .js 中：

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

如果要传递多个参数，包括 Event 参数：

在 .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.-->
/>

在 .js 中：

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

      },
....

原文由 eriel marimon 发布，翻译遵循 CC BY-SA 4.0 许可协议