如何使用 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);我期望选择的值，但我得到未定义。

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

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

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)

      },
....

Answer 2

\n

\n

这应该可以工作，您可以发布组件脚本的其余部分吗？\xe2\x80\x93 谢谢

\n

实际上，这就是我得到的全部内容以及与此选择表格有关的内容。

\n

\r\n

\r\n

  export default {\n    userMe: [],\n    data() {\n      return {\n        selected: null,\n        options: [],\n      }\n    },\n    created: function() {\n\n    },\n    methods: {\n      getSelectedItem: function() {\n        console.log(this.selected);\n      },\n      exportXML: function() {\n        console.log(this.selected);\n        this.$http.get(\n          \'http://localhost:8080/api/exports/\' + this.selected, )\n      });\n  }\n}

\r\n

\r\n

\r\n

\n