Comment obtenir l'élément sélectionné de b-form-select avec Vue.js. v-on: le changement ne fait rien?

Question

Je veux juste obtenir l'élément sélectionné du <b-form-select> que je veux utiliser pour un appel api. On dirait que v sur: le changement ne fait rien, mais ce fut la solution ici: https://stackoverflow.com/a/31273611/8743351

Quand j'utilise console.log(this.selected); j'attends la valeur sélectionnée, mais je me non défini.

Il y a tellement de façons différentes de résoudre cela, mais rien n'a fonctionné pour moi.

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

Cela devrait fonctionner, vous pouvez poster le reste de votre script composant? - thanksd

En fait, c'est tout ce que je suis et ce que doit faire avec ce formulaire de sélection.

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