有可能把子弹射入v-for吗？

Question

桌子

​

​

数据库中的数据，它仅用逗号分隔。

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)

正面结构。

​

​

输出，我需要

​

我的代码：

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

我怎样才能做到这一点？

Answer 1

首先将字符串拆分为数组，然后循环数组。

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