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

Question

我只想获取我想用于api调用的<b-form-select>的选定项目。它看起来像V系列：改变什么也不做，但它是这里的解决方案：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

这应该是工作，你可以发表你的组件脚本的其余部分？ - 谢谢

其实这就是我所得到的，以及如何选择这种形式。

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