如何在选项 select 上显示响应？ (vue.js 2)

Question

My component vue.js is like this :

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

The result of console.log(JSON.stringify(response.body)) :

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

I want display the response on the value of select. But when executed, on the console exist error like this :

TypeError: Cannot read property 'id' of undefined

Is there anyone who can help me?

Answer 1

The issue you are having is the final this.options variable is an hash nat an array, which should be an input to select element, you can modify you code inside fetchList method like following:

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

Have a look at working fiddle here .