关于使用vue elementui分组下拉框动态配置其数据源失效的问题？

Question

关于使用vue elementui分组下拉框动态配置其数据源失效的问题？
以下是我的下拉框代码：

<el-select id="sel" v-model="sizes" placeholder="请选择">
            <el-option-group v-for="group in sizes" :key="group.cofigname" :label="group.cofigname">
                <el-option v-for="item in group.sku" :key="item.cofigname" :label="item.cofigname" :value="item.id">
                </el-option>
            </el-option-group>
        </el-select>

数据源的生成代码:

beforeCreate() {
                $.getJSON("json/test1.json", function (data) {
                        var s = data.data.size;
                        var outdata = Array();
                        //格式化
                        for (let i = 0; i < s.length; i++) {
                            // let obj = [];
                            let obj = Array();
                            for(let j=0;j<s[i].sku.length;j++){
                                let child = {
                                    label:s[i].sku[j].cofigname,
                                    value:s[i].sku[j].cofigname
                                }
                                obj.push(child);
                            }
                            let parent = {
                                label:s[i].cofigname,
                                options:obj
                            }
                            outdata.push(parent);
                        }
                        this.sizes = outdata;
                        console.log("sada",outdata);
                    })
            },

上文中sada控制台打印的outdata:

[
    {
        "label": "长度",
        "options": [
            {
                "label": "1m",
                "value": "1m"
            },
            {
                "label": "2m",
                "value": "2m"
            },
            {
                "label": "3m",
                "value": "3m"
            }
        ]
    },
    {
        "label": "颜色",
        "options": [
            {
                "label": "红",
                "value": "红"
            },
            {
                "label": "黄",
                "value": "黄"
            },
            {
                "label": "蓝",
                "value": "蓝"
            },
            {
                "label": "绿",
                "value": "绿"
            },
            {
                "label": "紫",
                "value": "紫"
            }
        ]
    }
]  

elementui文档中写的数据源格式：

[{
          label: '热门城市',
          options: [{
            value: 'Shanghai',
            label: '上海'
          }, {
            value: 'Beijing',
            label: '北京'
          }]
        }, {
          label: '城市名',
          options: [{
            value: 'Chengdu',
            label: '成都'
          }, {
            value: 'Shenzhen',
            label: '深圳'
          }, {
            value: 'Guangzhou',
            label: '广州'
          }, {
            value: 'Dalian',
            label: '大连'
          }]
        }]

运行之后的效果：

请问为何不能将数据渲染到下拉框之中？

Answer 1

<!--示例代码-->
<template>
 <el-select v-model="value" placeholder="请选择">
    <el-option-group
      v-for="group in sizes"
      :key="group.label"
      :label="group.label">
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-option-group>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
     sizes:[],
      value: ''
    };
  },
  created(){
  },
  mounted() { 
  },
  beforeCreate() {
    this.$nextTick(() => {
    this.sizes=[
    {
        label: "长度",
        options: [
            {
                label: "1m",
                value: "1m"
            },
            {
                label: "2m",
                value: "2m"
            },
            {
                label: "3m",
                value: "3m"
            }
        ]
    },
    {
        label: "颜色",
        options: [
            {
                label: "红",
                value: "红"
            },
            {
                label: "黄",
                value: "黄"
            },
            {
                label: "蓝",
                value: "蓝"
            },
            {
                label: "绿",
                value: "绿"
            },
            {
                label: "紫",
                value: "紫"
            }
        ]
    }
    ]  
    })
  },
  methods: {
    },
  }

</script>

不想用下面这样异步的话，就把赋值放到created里面

this.$nextTick