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

Question

我的组件vue.js是这样的：

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

console.log(JSON.stringify(response.body))的结果：

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

我想显示对 select 值的响应。但是在执行的时候，控制台会出现这样的错误：

TypeError: Cannot read property 'id' of undefined

有没有人可以帮助我？

Answer 1

你遇到的问题是最后的 this.options 变量是数组中的哈希值，它应该是 select 元素的输入，你可以在 fetchList 中修改你的代码方法如下：

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

看看工作fiddlehere.

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

How to display response on the option select ? (vue.js 2)

javascript

vue.js

vue-component

laravel-5.3

vuejs2