Vue.js：如果值为空（例如：to =“”或type =“”），则不呈现属性

Question

我有一个Button组件，它根据您提供的属性（例如to还是）呈现一个nuxt-link或一个按钮type。

<div class="Btn">
  <component
    :class="['Btn__button', createAppearanceClasses]"
    v-on:click="click"
    :disabled="disabled"
    :is="type"
    :to="to"
    :href="external ? to : false"
    :target="target"
    :type="buttonType"
    >
    <slot />
  </component>
</div>

（而则type是nuxt-link用于为内部链接返回的计算属性，a如果是外部链接则为标签，或者button如果未定义这些属性则为标签）。

现在，我们有时渲染一些打开模态或提交的按钮。那里我们没有传递任何类型或属性：

<Btn :class="'FlexContent__button'" 
  :appearance="['rounded-corners']"
  v-on:click.native="openOverlay" 
>    
 {{ component.text }}
</Btn>

在呈现的HTML中，我得到：

<button disabled to="" target="" type="" class="Btn__button Btn__button--rounded-corners">

如果我对此进行验证，则会收到有关以下空属性的错误： Attribute to not allowed on element button at this point.

to=""仅当我将实际值传递给Btn组件时，才如何渲染属性？

我当时正在考虑类似的事情，但这是行不通的： (to ? ':to="to"' : '') 因此，我需要其他解决方案。

在此先感谢您的提示。

干杯

Answer 1

绑定v-bind到使用null，undefined或false值的任何属性都不会在元素中呈现。

属性和v-bind