如何使用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>