The table
The data that is in the Database it is only separated by commas.
Hepatitis A IgM Antibody (Anti-HAV IgM), Hepatitis A Total Antibody (Anti-HAV Total), Hepatitis B Core Antibody (Anti HBc Total), Hepatitis B Core IgM Antibody (Anti-HBc IgM), Hepatitis B Envelop Antibody (Anti-HBe), Hepatitis B Envelop Antigen (HBeAg), Hepatitis B Surface Antibody (Anti-HBs), Hepatitis B Surface Antigen, Hepatitis C Antibody (Anti-HCV), Qualitative (HBsAg)
Frontend structure.
My code:
<q-list v-for="specificPackage in specificPackages" v-bind:key="specificPackage.id" class="q-pa-md" bordered > <q-card-section horizontal> <q-card-section class="q-pt-xs"> <div class="text-h6 q-pt-md text-black" caption> LABORATORY TESTS: </div> <div class="text-subtitle1 q-pt-md packageitem"> {{ specificPackage.packageitem }} </div> </q-card-section> </q-card-section> </q-card> <q-separator /> </q-list>
How can I achieve this?
Advertisement
Answer
First split string into array and then loop the array
<q-list v-for="specificPackage in specificPackages" v-bind:key="specificPackage.id" class="q-pa-md" bordered > <q-card-section horizontal> <q-card-section class="q-pt-xs"> <div class="text-h6 q-pt-md text-black" caption> LABORATORY TESTS: </div> <div class="text-subtitle1 q-pt-md packageitem"> <li v-for="(packageitem, i) in specificPackage.packageitem.split(',')" :key="i"> {{packageitem}} /li> </div> </q-card-section> </q-card-section> </q-card> <q-separator /> </q-list>