如何使用Vue.js获取b-form选择的选定项目。 v-on：改变什么都不做？
问题描述：
我只想获取我想用于api调用的<b-form-select>的选定项目。它看起来像V系列：改变什么也不做，但它是这里的解决方案：https://stackoverflow.com/a/31273611/8743351如何使用Vue.js获取b-form选择的选定项目。 v-on：改变什么都不做？
当我使用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,
});
}
}
答
这应该是工作，你可以发表你的组件脚本的其余部分？ - 谢谢
其实这就是我所得到的，以及如何选择这种形式。
<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>
这应该是工作，你可以发表你的组件脚本的其余部分？ – thanksd