Question

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

当我使用console.log(this.selected);时，我期望所选的值，但我得到未定义。

有很多不同的方法可以解决这个问题，但没有任何方法可以帮助我。

＆＃13;

<!-- 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>

＆＃13;

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

＆＃13;

Answer 1

这应该可以发布您的组件脚本的其余部分吗？ - 谢谢

实际上，这就是我得到的以及与此选择表格有什么关系。

＆＃13;

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

＆＃13;

Answer 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'”。

Answer 3

我迟到了，但我修改了这个功能并且它有效，其余的是相同的：

select 
    wd.Department, 
    wd.WorkLocation,
    COUNT(1) as Count_On_Date,
    COUNT(case when DATEDIFF(DAY, wd.WorkDate, GETDATE()) < 7 then 1 end) as Count_Last7Days,
    COUNT(case when DATEDIFF(DAY, wd.WorkDate, GETDATE()) < 30 then 1 end) as Count_MonthToDate
from WorkData as wd
group by wd.Department, wd.WorkLocation

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

Answer 4

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

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

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

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

      },
....

如何使用Vue.js获取b-form-select的选定项目v-on：改变什么都没做？

4 个答案: