vue + elmentUI動态加載資料失敗，未能正常前端顯示，請大神指教！！！謝謝！！！

問題描述：

（一）、資料分為三部分：

（1）庫表擷取全部資料集合A（key：label的數組），

（2）庫表擷取Target資料集合B（隻有A中的key值數組） ，

（3）Source顯示Target中不存在的key對應的資料C（key：label的數組）；

（二）待解決問題：

Target資料已擷取，即[a,b,c]，全部資料已擷取，即[{a：AA}，{b:BB}，{c:CC}，{d:DD}，{e:EE}]，如何處理能将AA、BB、CC顯示在Target框内，将DD、EE顯示在Source；當點選“到左邊”、“到右邊”按鈕時，資料能正常加載？

現存Js代碼：

<template>
  <el-dialog
    title="權限"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <div style="text-align: center">
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="dataForm.value"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['Source', 'Target']"
          :button-texts="['到左邊', '到右邊']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          @change="handleChange"
          :data="dataForm.source">
          <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
        </el-transfer>
        <div id = "target">
          {{this.dataForm.value}}
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>

<script>
  export default {
    data () {
      return {
        userId: '',
        visible: true,
        target: [], // 存儲使用者接口表查詢的資料
        allsour: [], // 所有接口服務
        dataForm: {
          value: [],
          source: [] // 存儲左選框剔除使用者接口表<右選框>的ServiceID的資料作為備選項
        }
      }
    },
    methods: {
      init (id) {
        this.userId = id || 0
        // 擷取第三方所有接口資訊
        this.$http({
          url: 'http://127.0.0.1:9050/sysServeInfo/getPageList?rows=0&page=0',
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          // 第三方接口資訊資料
          const services = data.data
          for (let i = 0; i < services.length; i++) {
            this.allsour.push({
              key: services[i].serviceIdstr,
              label: services[i].serviceName
            })
          }
          const allsour = this.allsour
          // 初始化右選框 取值于<使用者接口表>
          this.$http({
            url: this.$http.adornUrl(`/sys/user/intfa/${this.userId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            for (let i = 0; i < data.length; i++) {
              for (let j = 0; j < allsour.length; j++) {
                if (data[i] === allsour[j].key) {
                  this.target.push({
                    key: allsour[j].key,
                    label: allsour[j].label
                  })
                }
              }
            }
            // target表示使用者接口表查詢的資訊:key,label
            const target = this.target
            // Observer對象轉數組
            const targetArr = JSON.parse(JSON.stringify(target))
            for (let i = 0; i < targetArr.length; i++) {
              // 将使用者接口表的資訊初始化至右選框
              this.dataForm.value.push(targetArr[i].key)
            }
            console.log(this.dataForm.value)
            // 初始化左選框 測試完成
            for (let m = 0; m < allsour.length; m++) {
              let flag = true
              for (let n = 0; n < target.length; n++) {
                if (allsour[m].key === target[n].key) {
                  flag = false
                  break
                }
              }
              if (flag) {
                this.dataForm.source.push({
                  key: allsour[m].key,
                  label: allsour[m].label
                })
              }
            }
          })
        })
      },
      handleChange (value, direction, movedKeys) {
        console.log(value, direction, movedKeys)
      },
      // 表單送出
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/sys/user/auth`),
              method: 'post',
              data: this.$http.adornData({
                'user_id': this.userId,
                'intfac_ids': this.dataForm.value
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
           

請大神 指教，謝謝！