el-transfer（穿梭框）一邊數據為空時，嘗試添加至另一邊報錯：Cannot read property '0' of null at patchBlockChildren (runtime-core.esm-bundler.js?5c40:3996)

↓

<el-transfer v-model="transferData.value" :props="{key:'id',label:'name',disabled:'status'}" :data="transferData.data" style="text-align: left; display: inline-block" filterable :titles="['未擁有菜單', '已擁有菜單']" :button-texts="['分配', '移除']" :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}" />
    
  data() {
    const loadTransferData = () => {
      const _this = this as any;
      const transferData = {
        data: [] as Array<any>,
        value: [1, 2, 3],
      };
      for (let i = 1; i <= 15; i++) {
        transferData.data.push({
          id: i,
          name: `備選項 ${i}`,
          status: i % 4 === 0,
        });
      }
      return transferData;
    };
    return {
      transferData: loadTransferData(),
    };
  },

問題描述：

在vue3.0版本下使用element-plus的el-transfer（穿梭框）組件，將右面板的所有數據移至左面板，

再將左面板某項移至右面版時，出現下面的錯誤：

Uncaught (in promise) TypeError: Cannot read property '0' of null
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:3996)
    ...

經過排查只有在左面板或者右面板上沒有數據時才會出現此錯誤。

解決方法：

此錯誤產生為Vue的bug，目前Vue已經在3.0.5版本中進行了修復。

將Vue升級至最新版本：

npm install vue --save