Question

我正在使用 "@vue/test-utils": "^1.1.4" 测试 veutify 示例 v-expansion-panels。

      <v-expansion-panels>
        <v-expansion-panel
          v-for="(item,i) in 5"
          :key="i"
        >
          <v-expansion-panel-header>Item</v-expansion-panel-header>
          <v-expansion-panel-content>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-expansion-panels>

但是，在安装我的组件后，我在 

上得到了 <v-expansion-panel-content>

    <div data-v-b60b777e="" class="v-item-group theme--light v-expansion-panels">
      <div data-v-b60b777e="" aria-expanded="false" class="v-expansion-panel"><button data-v-b60b777e="" type="button" class="v-expansion-panel-header">Item<transition-stub name="fade-transition">
            <div class="v-expansion-panel-header__icon"><i aria-hidden="true" class="v-icon notranslate mdi mdi-chevron-down theme--light"></i></div>
          </transition-stub></button>
        <transition-stub data-v-b60b777e="" name="expand-transition">
          <!---->
        </transition-stub>
      </div>
      ......

如何让扩展面板的内容显示出来？

Answer 1

事实证明，我只需要向组件中添加渴望，例如 <v-expansion-panel-content eager>，它会强制生成内容。

v-expansion-panel-content 在 vue/test-utils 上显示

1 个答案: