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

【问题标题】：How to get selected item of b-form-select with Vue.js. v-on:change does nothing?如何使用 Vue.js 获取 b-form-select 的选定项。 v-on:change 什么都不做？
【发布时间】：2017-10-17 12:04:41
【问题描述】：

我只想获取要用于 api 调用的 <b-form-select> 的选定项。看起来 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,
    });
}
}

【问题讨论】：

这应该可以工作，您可以发布其余的组件脚本吗？

标签： javascript twitter-bootstrap select vuejs2

【解决方案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)

      },
....

【讨论】：

这应该是答案。谢谢！

【解决方案2】：

如果有人偶然发现这一点，我认为问题在于 v-on:change 在更新之前过早地获取了该值。所以结果是不确定的。如果您要单击另一个选项，您应该会看到先前单击的旧值变得可见。

我刚刚解决了一个类似的问题。我包括使用 debounce 来等待执行 on change 方法。

这就是这里实现的 https://www.reddit.com/r/vuejs/comments/5xb9tj/input_call_a_method_but_with_debounce/

您还需要 npm install loadash 并在该部分中包含“import _ from 'lodash'”。

【讨论】：

同样的问题，有没有办法通过 onChange 方法传递当前选择的值而不使用全局数据变量？
嘿@KasparTr，我认为使用观察者是可能的。它对于执行异步任务很有用。 vuejs.org/v2/guide/computed.html#Watchers

【解决方案3】：

我来晚了，但我修改了函数有点像这样，它可以工作，其余的都是一样的：

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

请注意，我不是从模型中获取值，而是将所选项目传递给函数。

【讨论】：

【解决方案4】：

这应该可以工作，您可以发布其余的组件脚本吗？ - 谢谢d

其实这就是我得到的所有东西，和这个选择表单有什么关系。

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

【讨论】：