Search code examples
javascriptvue.jsvuejs2quasar-frameworkquasar

Is it possible to put a bullet in a v-for?

The table

enter image description here

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.

The output that I needed enter image description here

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?

Solution

  • 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>