【问题标题】:Is it possible to put a bullet in a v-for?是否可以在 v-for 中放一颗子弹?
【发布时间】:2021-12-28 05:41:07
【问题描述】:

桌子

数据库中的数据只用逗号分隔。

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>

我怎样才能做到这一点?

【问题讨论】:

  • 你可以用逗号分割“specificPackage.packageitem”并用
  • 循环
  • @KamranKhalid 你如何在表格的特定列中做到这一点?
  • @Grizzle Bear 在这种情况下你需要使用 v-if 否则会更好,请分享一个完整的行以便更好地理解
  • @KamranKhalid 我已经为它编辑并上传了表格
  • 标签: javascript vue.js vuejs2 quasar-framework quasar


    【解决方案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>
    

    【讨论】:

    • 如果你这样显示,你会怎么做?
    • {{ specificPackage.packageitem }}
    • 该li标签只有甲型肝炎IgM抗体(Anti-HAV IgM)的项目符号,其余没有
  • 在显示之前将字符串拆分为数组
  • 猜你喜欢
    相关资源
    最近更新 更多
    热门标签