Vuetify v-btn组件与nuxt属性显得不同

Question

如果v-btn（vuetify）组件具有“ nuxt”属性（在nuxt.js框架中用作a），则其显示方式会有所不同。

如何解决？

第一个图像是不含“ nuxt”的v-btn组件（应正常显示），第二个图像具有该属性。

<v-btn
    class="enter-btn"
    large
    color="error"
    :disabled="!agreed"
>
    Accept and Enter
</v-btn>

<v-btn
    class="enter-btn"
    large
    color="error"
    :disabled="!agreed"
    nuxt
    to="/to/url"
>
    Accept and Enter
</v-btn>

Answer 1

添加了nuxt和to属性后，元素将从<button ...>变为<a href="/to/url" ... >。

不幸的是，将两个代码示例添加到一个新的项目中并不能显示您的视觉差异。 <a>有一个附加的类v-btn--router，但不会引起宽度差异或文本对齐问题。

您可以通过检查控制台中的每个元素，查看“样式”窗格并检查（在RHS上）除Vuetify之外的任何样式来源（在VBtn.sass和{{1}中）来进行一些调试。 }。

由于宽度是问题的属性之一，因此在“计算”选项卡中检查VApp.sass值时也很值得。
如果直接由某物设置它，则可以单击它以打开以查看其值的来源（例如，文件width中的类.v-btn:not(.v-btn--round).v-size--large将height设置为44px）。