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

Posted 2023-02-23

【中文标题】如何在选项选择上显示响应？ (vue.js 2)

【英文标题】：How to display response on the option select ? (vue.js 2)

【发布时间】：2017-06-28 06:22:59

【问题描述】：

我的组件 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":"类别 1","21":"类别 2","22":"类别 3"

我想显示对选择值的响应。但是当执行时，在控制台上存在这样的错误：

TypeError: 无法读取未定义的属性“id”

有没有人可以帮助我？

【参考方案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]
      )
    );

看看工作小提琴here。

【讨论】：

我想问。为什么它使用 setTimeout？没有 setTimeout，它可以工作

@mosestoh 我用setTimeout 只是为了模拟你的异步调用。

好的。谢谢你帮助我