在 Vue3 中显示对象数组

Question

如何显示 table 中的“行”变量或模板中的其他内容。

我想使用我的 api 检索一些数据并将结果显示在 table 中。我 select 一个带有 select 按钮的“版本”，然后在输入中设置一个“词”来搜索数据库...

每次研究（点击），应该更新一个对象数组，并更新 table.

我被困在我应该将更新的“行”变量传递给视图的部分。（顺便说一下，每次单击时数组总是在增长）

我确定 api 部分没问题，它检索数据。但是 table 的 update/display 不起作用。我使用 quazar table 来显示。该选项卡显示为已填充并在单击后立即消失。每次单击也会添加项目。我需要清理阵列，也许使用 splice ?

模板：

<template>
  
  <q-select  rounded outlined bottom-slots v-model="version" :options="options" label="Select Database Version"  :dense="false" :options-dense="false" >  </q-select>

  <div class ="searchButton">
  <div  class="q-pa-md">
      <div class="q-gutter-md" style="max-width: 300px">
        <q-input v-model="gene" label="Find your gene !" />
        <q-btn @click="search(version)" label="Search" />
        <q-icon name="search" />
      </div>
    </div>
 </div>
<br/>
<br/>

  <div v-if ="loading" class="q-pa-md" id = 'table'>
    <q-table
      title="Ligand - Receptor"
      :rows="rows"
      :columns="columns"
      row-key="name"
    />
  </div>

</template>

脚本：

<script lang="ts">
import { defineComponent, toRefs,ref,reactive,onMounted,onBeforeUpdate,onUpdated} from 'vue';
import { ReleasesApi  } from '../api/ReleasesApi'; 
import Release from '@/models/Release';
import Interactor from '@/models/Interactor';

import { useEngine } from '../composition/searchEngine';

export default defineComponent ({
setup () {
  
   const gene  = ref<string>("TIE1")
   const version = ref<string>("1");

   const options   = ref<string[]>(["1","2"]);
   const loading   = ref<boolean>(true);
   const error     = ref<boolean>(false);


   let ids_interactor    = <number[]>([]);
   let interactors    = <Interactor[]>([]);



  // let rows = ref([{}]);
    let rows = ref([{interactor_id : 1 , official_symbol : "FD" }]);

const columns = [
   { name: 'interactor_id',required: true,label: 'interactor_id',align: 'left',field: row => row.interactor_id,format: val => `${val}`,sortable: true },
   { name: 'official_symbol',required: true,label: 'official_symbol',align: 'left',field: row => row.official_symbol,format: val => `${val}`,sortable: true }];

 
  onMounted (   () =>  {console.log("Mounted") });
   // make sure to reset the refs before each update
  onBeforeUpdate(() => { console.log("onBeforeUpdate") ;  } ); //valled when reactive data changes and before re-render
  //onUpdated(() => { console.log("onUpdated") ; rows.value = [{}]; } ); /x/called after re-render

 function  search () {

           console.log("async search function called !")
           console.log(gene.value +" "+ version.value );

           /* First database request */

            const fetchData = async function (){
                  try {
                      ids_interactor =  await ReleasesApi.getIndexInteractions(version.value,gene.value);
                  } catch (e) {
                      if (e instanceof TypeError) {error.value = true }
                      }


                      //loading.value  = false; This one make the tab display disappear.
                      for (const type of ["ligand","receptor"] ) {
                          for (const id of ids_interactor) {
                            try {
                                const interactor : Interactor =  await ReleasesApi.getInteractorsUsingTypeAndIndex(type,id);
                                interactors.push(interactor[0]);
                                //ajout dans le hash
                            } catch (e) {
                                if (e instanceof TypeError) {error.value = true }
                                }
                          }
                      }
                // outside will not work
                for (let i = 0; i < interactors.filter(interactor=>interactor.type=="ligand").length; i++) {
                 
                  rows.value.push( { 
                      interactor_id : interactors.filter(interactor=>interactor.type=="ligand")[i].interactor_id , 
                     official_symbol : interactors.filter(interactor=>interactor.type=="ligand")[i].official_symbol } );

                 }
            }

   fetchData()
   console.log("WhereAmI")
   console.log(rows.value[0].interactor_id) // That'ok 

   loading.value  = true;

  }

   return { loading,error,version,ids_interactor,gene,options,columns,rows,search}
}

});

  </script>

Answer 1

你得到你的错误是因为你写了 v-list 而不是 q-list 和 v-list-item 一样。

您的 fetchData 函数是异步的。这意味着 loading.value = false 可能会在 loading.value = true 之后被调用。如果发生这种情况，q-table 将永远不可见。您必须在异步函数的末尾设置 loading.value = true。在它的最开始，您可以通过将其设置为空数组 (= [])

来清理行

在 Vue3 中显示对象数组

Display an array of objects in Vue3

typescript

vuejs3

reactive

quasar