你好，节日快乐！
我在Vue 3应用程序中有一个小错误。如果我使用的是没有子组件的beforeMount，一切都很正常。代码只执行一次，页面显示。但是，如果我向父组件添加子组件，一切都开始出错，代码无限期运行。

父组件

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Previzualizare deviz</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <DevizView :clientArray = "clientData" :vehicleArray = "vehicleData"/>// Child Component
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
                </div>
              </div>
            </div>

<script>
import axios from "@/axios";
import DevizView from "@/views/Test.vue";

export default {
  props: {
    id: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      vehicleData: [],
      clientData: []
    }
  },
  components: {
    DevizView
  },
  methods: {
    async GetVehicleDetails() {
      await axios.post('http://localhost:3000/vehicle/GetVehicleDetails', {id:this.id})
        .then((res)=>{
          this.vehicleData = res.data;
          // Parse the stringified JSON into an actual JSON object
          try {
            this.vehicleData.vehicleTask = JSON.parse(this.vehicleData.vehicleTask);
          } catch (error) {
            console.error('Error parsing vehicleTask JSON:', error);
          }
        }).catch(err=>console.log(err))
      return this.vehicleData
    },
    async GetCustomerDetails() {
      await axios.post('http://localhost:3000/customer/GetCustomerDetails', {id:this.vehicleData.clientId})
        .then((res)=>{
          this.clientData = res.data;
          // Parse the stringified JSON into an actual JSON object
        }).catch(err=>console.log(err))
      return this.clientData
    },
  },
  beforeMount(){
    this.GetVehicleDetails().then(() => {
    this.GetCustomerDetails();
  });
    
  }
};

字符串

子组件

<div class="table-responsive">
    <table class="table table-sm caption-top">
      <caption><strong>Client/Predator</strong></caption>
      <tbody>
        <tr>
          <th class="table-secondary">Nume</th>
          <td colspan="3">{{ clientArray.clientName }}</td>
        </tr>
        <tr>
          <th class="table-secondary">Telefon</th>
          <td>{{ clientArray.clientPhone }}</td>
          <th class="table-secondary">Email</th>
          <td>{{ clientArray.clientEmail }}</td>
        </tr>
        <tr>
          <th class="table-secondary">Data de intrare:</th>
          <td>{{ vehicleArray.vehicleEnterDate }}</td>
          <th class="table-secondary">Data de iesire:</th>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>

型
如果我从子组件中删除动态变量（例如：{{ clientArray.clientPhone }}），一切都正常。
感谢您抽出宝贵的时间。
编辑#1谷歌Chrome开发错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at line 184

型
节点控制台：

Executing (default): SELECT `id`, `clientId`, `vehiclePlate`, 

`vehicleVIN`, `vehicleMake`, `vehicleModel`, `vehicleYear`, `vehiclePower`, `vehicleGas`, `vehicleCapacity`, `vehicleOdometer`, `vehicleTask`, `vehicleEnterDate`, `vehicleEstExitDate`, `vehicleDocuments`, `vehicleStatus`, `modifiedBy`, `createdBy`, `createdAt`, `updatedAt` FROM `vehicles` AS `vehicles` WHERE `vehicles`.`id` = '2';
Executing (default): SELECT `id`, `clientId`, `vehiclePlate`, `vehicleVIN`, `vehicleMake`, `vehicleModel`, `vehicleYear`, `vehiclePower`, `vehicleGas`, `vehicleCapacity`, `vehicleOdometer`, `vehicleTask`, `vehicleEnterDate`, `vehicleEstExitDate`, `vehicleDocuments`, `vehicleStatus`, `modifiedBy`, `createdBy`, `createdAt`, `updatedAt` FROM `vehicles` AS `vehicles` WHERE `vehicles`.`id` = '2';
Executing (default): SELECT `id`, `clientType`, `clientName`, `clientId`, `clientPhone`, `clientEmail`, `clientReg`, `createdAt`, `updatedAt` FROM `clients` AS `clients` WHERE `clients`.`id` = '12';
Executing (default): SELECT `id`, `clientId`, `vehiclePlate`, `vehicleVIN`, `vehicleMake`, `vehicleModel`, `vehicleYear`, `vehiclePower`, `vehicleGas`, `vehicleCapacity`, `vehicleOdometer`, `vehicleTask`, `vehicleEnterDate`, `vehicleEstExitDate`, `vehicleDocuments`, `vehicleStatus`, `modifiedBy`, `createdBy`, `createdAt`, `updatedAt` FROM `vehicles` AS `vehicles` WHERE `vehicles`.`id` = '2';
Executing (default): SELECT `id`, `clientType`, `clientName`, `clientId`, `clientPhone`, `clientEmail`, `clientReg`, `createdAt`, `updatedAt` FROM `clients` AS `clients` WHERE `clients`.`id` = '12';
Executing (default): SELECT `id`, `clientId`, `vehiclePlate`, `vehicleVIN`, `vehicleMake`, `vehicleModel`, `vehicleYear`, `vehiclePower`, `vehicleGas`, `vehicleCapacity`, `vehicleOdometer`, `vehicleTask`, `vehicleEnterDate`, `vehicleEstExitDate`, `vehicleDocuments`, `vehicleStatus`, `modifiedBy`, `createdBy`, `createdAt`, `updatedAt` FROM `vehicles` AS `vehicles` WHERE `vehicles`.`id` = '2';

型

184号线

<tbody v-if="vehicleData && vehicleData.vehicleTask.length">
                  <tr v-for="Task, index in vehicleData.vehicleTask" :key="Task.id">
                    <th scope="row" colspan="2">{{ index }}</th>
                    <td colspan="2">{{ Task.title }}</td>
                  </tr>
                </tbody>

型