ELSelect的bug

[coder-xiaotian]

Bug description

下拉组件动态更新选项数量报错。

Uncaught (in promise) TypeError: Cannot read property '0' of null
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:3996)
    at processFragment (runtime-core.esm-bundler.js?5c40:4065)
    at patch (runtime-core.esm-bundler.js?5c40:3708)
    at patchKeyedChildren (runtime-core.esm-bundler.js?5c40:4411)
    at patchChildren (runtime-core.esm-bundler.js?5c40:4354)
    at processFragment (runtime-core.esm-bundler.js?5c40:4084)
    at patch (runtime-core.esm-bundler.js?5c40:3708)
    at patchKeyedChildren (runtime-core.esm-bundler.js?5c40:4411)
    at patchChildren (runtime-core.esm-bundler.js?5c40:4354)
    at patchElement (runtime-core.esm-bundler.js?5c40:3984)

代码如下：

<template>
  <div class="cascade-select">
    <el-select
      v-model="modelValue"
    >
      <el-option
        v-for="op in selectDataList"
        :key="op.value"
        :value="op.value"
        >{{ op.label }}</el-option
      >
    </el-select>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

const treeData = [
  {
    label: "mxnet",
    value: "mxnet"
  },
  {
    label: "tensorflow",
    value: "tensorflow"
  },
  {
    label: "pytorch",
    value: "pytorch"
  }
];

export default defineComponent({
  name: "cascade-select",
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  setup(props, context) {
    const modelValues = ref("");
    const selectDataList = ref([] as any[]);

    setTimeout(() => {
      selectDataList.value = treeData;
    }, 3000);

    return {
      modelValues,
      selectDataList
    };
  }
});
</script>

<style scoped lang="less">
.cascade-select {
}
</style>

如果使用原生的select和option标签则无问题。

What is the current behavior?
报错录屏：

QQ.20201229201223.mp4

Environment

• Element3 Version: 0.0.35
• Node Version: 12.18.0
• OS and version: win10

[cuixiaorui]

看起来是 vue3 的 bug

如果之前组件的 type 是 Fragment 类型，那么在进行 patchBlockChildren 的时候会出现问题

我会尝试做一个可复现的更小的 demo 去 vue3 那边确认一下

[cuixiaorui]

这是个已知的 vue3 的bug

已经解决了，但是需要等待 vue3 发版

这是对应的问题 传送门

[coder-xiaotian]

这是个已知的 vue3 的bug

已经解决了，但是需要等待 vue3 发版

这是对应的问题 传送门

好的，谢谢

[wind13]

临时绕过的办法，提前给一个临时的值：

const selectDataList = ref([] as any[]);
selectDataList.value = [
  {
    label: "loading...",
    value: ""
  }
];
setTimeout(() => {
   selectDataList.value = treeData;
}, 3000);