Блог

Я пытаюсь создать таблицу данных, но массив данных-это обещание. Я не могу отправить этот массив методу ref() , потому что он ждет массива, и я отправляю обещание. Проблема в том, что я отправил запрос в свой API, затем я экспортирую обещание из файла transactions.ts, затем я получаю обещание в своем списке клиентов.vue, но я не могу использовать массив для инициализации всего. Я получил эту ошибку :

 ERROR in src/views/apps/customers/CustomersListing.vue:255:48 TS2769: No overload matches this call.  Overload 1 of 3, '(value: ITransaction[]): Reflt;{ id: string; stateOfPaiement: string; code: string; nbrTickets: number; lydiaRequestId: string; lydiaRequestUuid: string; date: string; stripeRequestId: string; ... 6 more ...; packageId: string; }[]gt;', gave the following error.  Argument of type 'Promiselt;ITransaction[]gt;' is not assignable to parameter of type 'ITransaction[]'.  Type 'Promiselt;ITransaction[]gt;' is missing the following properties from type 'ITransaction[]': length, pop, push, concat, and 28 more.  Overload 2 of 3, '(value: ITransaction[]): Reflt;{ id: string; stateOfPaiement: string; code: string; nbrTickets: number; lydiaRequestId: string; lydiaRequestUuid: string; date: string; stripeRequestId: string; ... 6 more ...; packageId: string; }[]gt;', gave the following error.  Argument of type 'Promiselt;ITransaction[]gt;' is not assignable to parameter of type 'ITransaction[]'.  253 | ]);  254 |  gt; 255 | const tableData = reflt;Arraylt;ITransactiongt;gt;(transactions);  | ^^^^^^^^^^^^  256 | const initCustomers = reflt;Arraylt;ITransactiongt;gt;([]);  257 |  258 | onMounted(() =gt; {  

Я понимаю, в чем проблема, но я не могу найти решение для отправки массива данных только тогда, когда он будет разрешен из обещания. Потому что мне нужно ref инициализировать мою таблицу данных. Как я могу инициализировать все только тогда, когда я выполнил обещание Заранее благодарю вас за ваш ответ

Вы можете найти оба файла ниже.

Список клиентов.vue

 lt;script lang="ts"gt; import { defineComponent, ref, onMounted } from "vue"; import Datatable from "@/components/kt-datatable/KTDatatable.vue"; import ExportCustomerModal from "@/components/modals/forms/ExportCustomerModal.vue"; import AddCustomerModal from "@/components/modals/forms/AddCustomerModal.vue"; import { MenuComponent } from "@/assets/ts/components"; import { setCurrentPageBreadcrumbs } from "@/core/helpers/breadcrumb"; import transactions from "@/core/data/transactions"; import { ITransaction } from "@/core/data/transactions";  export default defineComponent({  name: "customers-listing",  components: {  Datatable,  ExportCustomerModal,  AddCustomerModal,  },  setup() {  const checkedCustomers = ref([]);  const tableHeader = ref([  {  key: "checkbox",  },  {  name: "Customer Name",  key: "lydiaRequestId",  sortable: true,  },  {  name: "Email",  key: "userEmail",  sortingField: "user.email",  sortable: true,  },  {  name: "State Of Paiement",  key: "stateOfPaiement",  sortable: true,  },  {  name: "Code",  key: "code",  sortable: false,  },  {  name: "Date",  key: "date",  sortable: true,  },  {  name: "Actions",  key: "actions",  },  ]);   const tableData = reflt;Arraylt;ITransactiongt;gt;(transactions);  const initCustomers = reflt;Arraylt;ITransactiongt;gt;([]);   onMounted(() =gt; {  MenuComponent.reinitialization();  setCurrentPageBreadcrumbs("Customers Listing", ["Apps", "Customers"]);  initCustomers.value.splice(0, tableData.value.length, ...tableData.value);  });   const deleteFewCustomers = () =gt; {  checkedCustomers.value.forEach((item) =gt; {  deleteCustomer(item);  });  checkedCustomers.value.length = 0;  };   const deleteCustomer = (id) =gt; {  for (let i = 0; i lt; tableData.value.length; i  ) {  if (tableData.value[i].id === id) {  tableData.value.splice(i, 1);  }  }  };   const search = reflt;stringgt;("");  const searchItems = () =gt; {  tableData.value.splice(0, tableData.value.length, ...initCustomers.value);  if (search.value !== "") {  let results: Arraylt;ITransactiongt; = [];  for (let j = 0; j lt; tableData.value.length; j  ) {  if (searchingFunc(tableData.value[j], search.value)) {  results.push(tableData.value[j]);  }  }  tableData.value.splice(0, tableData.value.length, ...results);  }  };   const searchingFunc = (obj, value): boolean =gt; {  for (let key in obj) {  if (!Number.isInteger(obj[key]) amp;amp; !(typeof obj[key] === "object")) {  if (obj[key].indexOf(value) != -1) {  return true;  }  }  }  return false;  };   return {  tableData,  tableHeader,  deleteCustomer,  search,  searchItems,  checkedCustomers,  deleteFewCustomers,  };  }, }); lt;/scriptgt;   

транзакции.ts

 import ApiService from "@/core/services/ApiService"; import JwtService from "@/core/services/JwtService";   interface Ambassador {  id: string;  firstName: string;  lastName: string;  email: string;  phoneNumber: string; }  interface Buyer {  id: string;  firstname: string;  lastname: string;  email: string;  phone: string; }  interface ITransaction {  id: string;  stateOfPaiement: string;  code: string;  nbrTickets: number;  lydiaRequestId: string;  lydiaRequestUuid: string;  date: string;  stripeRequestId: string;  ticketingTransactionId: string;  ticketingSecret: string;  createAt: string;  updateAt: string;  buyer: Buyer;  user: Ambassador;  packageId: string; }  function getTransactions() {  const params = {  params: {  token: JwtService.getToken(),  },  };  return new Promiselt;ITransaction[]gt;((resolve, reject) =gt; {  ApiService.query("purchases", params)  .then(({ data }) =gt; {  resolve( data.transactions );  })  .catch(({ response }) =gt; {  reject(response);  });  }); }   export { ITransaction }; const transactions = getTransactions(); export default transactions;