'With Vue.Js How can I call data from Backend into Modal in FrontEnd

In the image below, I call the current version with the Component from the Result field, but I cannot print the cloned project to the modal on the right. If anyone has an idea on how to fix this I would be very happy.

// COMPARE ACTION

    GetCompareListByProject() {
      // var _projectNo = this.$route.params.name;
      var _this = this;
      axios
        .post(
          GetURL() +
            "Electric/GetVersionListByProject/" +
            "-" +
            "/" +
            this.CloneSourceProjectNo
        )
        .then((resp) => {
          if (resp.data.Response == true) {
            var revisionList = [];

            var data = resp.data.Data;
            for (var i = 0; i < data.length; i++) {
              if (revisionList.indexOf(data[i].RevisionNo) < 0)
                revisionList.push(data[i].RevisionNo);
            }

            _this.CloneModalList = {
              Revisions: revisionList,
              Data: data,
            };
            _this.CloneNewNumber = {
              Revision: resp.data.Revision,
              Version: resp.data.Version,
            };
          }
        });
    },

    CompareVersion() {
      axios
        .post(
          GetURL() +
            "Electric/OpenElectricProjectById/" +
            this.OpenModalSelected.Id
        )
        .then((resp) => {
          console.log(resp.data);
          this.$store.state.project.ProjectTab.filter(
            (p) => p.title == "Electric"
          )[0].form = resp.data.Data.InputMain[0];

          this.$store.state.project.Models.Project.Transformer.Electric =
            resp.data.Data.Electric;

          this.$store.state.general.ProjectMessage =
            "Opened Version  R" +
            resp.data.Data.InputMain[0].RevisionNo +
            "V" +
            resp.data.Data.InputMain[0].VersionNo;
          this.$swal({
            position: "top-end",
            icon: "success",
            title: "Project Opened",
            showConfirmButton: false,
            timer: 1500,
          });
          this.$store.state.general.isLoading = false;
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<b-modal
      size="xl modal-full"
      id="modal-compare"
      title="Compare Project"
      ok-only
      ok-variant="secondary"
      ok-title="Cancel"
    >
      <b-card class="w-50 h-10" style="float: left">
        <b-tabs class="tabList" v-model="tabIndex">
          <b-tab
            @click="SetTabType('Result')"
            v-for="(elec, index) in $store.state.project.Models.Project
              .Transformer.Electric"
            :key="index"
            :active="index == 0"
          >
            <!-- <template #title>
              <span class="line-tab">|</span>
              {{ GetResultPageTitle(elec, index) }}
            </template> -->

            <ResultParameters
              :Electric="elec"
              :InputMain="
                $store.state.project.Models.Project.Transformer.InputMain[0]
              "
              style="overflow-x: auto"
            >
            </ResultParameters>
          </b-tab>
        </b-tabs>
      </b-card>

      <b-card class="w-50 h-10" style="float: right">
        <b-form-group
          class="mb-0"
          label-cols-sm="12"
          label-cols-xl="4"
          label="Clone Project"
          label-class="text-left"
        >
          <b-input-group>
            <b-input v-model="CloneSourceProjectNo"></b-input>
            <b-input-group-append>
              <b-input-group-text
                style="cursor: pointer"
                @click="GetCompareListByProject"
                ><i class="fa fa-sync-alt"></i
              ></b-input-group-text>
            </b-input-group-append>
            <b-button
              class="w-100 waterGreen"
              style="margin-top: 5px"
              @ok="CompareVersion"
              :ok-disabled="CompareModalSelected == null"
            >
              <i class="fa fa-bars"></i> Compare
            </b-button>
          </b-input-group>
        </b-form-group>

        <div class="mt-2"></div>
        <div
          v-for="rev in CloneModalList.Revisions"
          :key="rev"
          class="tree-view"
        >
          <h5>R{{ rev }}</h5>

          <div
            class="tree-item"
            v-for="vers in CloneModalList.Data.filter(
              (x) => x.RevisionNo == rev
            )"
            :key="vers.Id"
          >
            <span :class="GetInput().Id == vers.Id ? 'font-weight-bold' : ''">
              <i
                class="fas fa-check-circle releasedVersIcon"
                v-if="vers.ActiveVersion"
              ></i>
              V{{ vers.VersionNo }} : {{ vers.Description }}
              <b-radio
                :value="vers"
                v-model="CompareModalSelected"
                style="width: 16px; float: right; margin-top: -1px"
              ></b-radio>
            </span>
          </div>
        </div>
      </b-card>

      
    </b-modal>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source