Wie wird die Antwort auf die Option angezeigt? (Vue.js 2)

Question

Meine Komponente vue.js ist wie folgt:

<script> 
    export default{ 
    name: 'CategoryBsSelect', 

    template: '\ 
     <select class="form-control" v-model="selected" required>\ 
     <option v-for="option in options" v-bind:value="option.id" v-bind:disabled="option.disabled">{{ option.name }}</option>\ 
     </select>', 

    //props: {list: {type: String, default: ''}}, 

    mounted() { 
     this.fetchList(); 
    }, 

    data() { 
     return { 
     selected: '', 
     options: [{id: '', name: 'Pilih Kategori'}] 
     }; 
    }, 

    methods: { 
     fetchList: function() { 
      this.$http.post(window.BaseUrl+'/member/category/list').then(function (response) { 
       //this.$set('list', response.data); 
       console.log(JSON.stringify(response.body)) 
       Object.keys(response.body).forEach(function (key) { 
        console.log(key) 
        console.log(response.body[key]) 
        this.$set(this.options, key, response.body[key]); 
       }, this); 
      }); 
     }, 
    } 
    }; 

</script> 

Das Ergebnis console.log(JSON.stringify(response.body)):

{"20":"Category 1","21":"Category 2","22":"Category 3"}

I angezeigt werden soll die Antwort auf den Wert der Auswahl. Aber wenn ausgeführt, auf der Konsole gibt es einen Fehler wie folgt:

TypeError: Cannot read property 'id' of undefined

Gibt es jemanden, der mir helfen kann?

Answer 1

Das Problem Sie haben die endgültige this.options Variable ist eine Hash-nat ein Array, das eine Eingabe zum select Element sein sollte, können Sie Sie Code innerhalb fetchList Verfahren modifizieren, wie folgt:

Object.keys(resp).forEach((key) => { 
     console.log(key) 
     console.log(resp[key]) 
     this.options.push({ 
     id: key, 
     name: resp[key] 
     }) 
    }); 

Have a Blick auf die Arbeit Geige here.