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

Posted 2023-02-23

【中文标题】Vue.js：如果值为空，则不呈现属性（例如：to="" 或 type=""）

【英文标题】：Vue.js: Don't render attributes if value is empty (e.g.: to="" or type="")

【发布时间】：2018-09-25 16:38:58

【问题描述】：

我有 Button 组件，它根据您是否提供一些属性，如 to 或 type 来呈现 nuxt-link 或按钮。

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

现在我们有时会渲染一些打开 Modal 或提交的 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.

只有当我将实际值传递给 Btn 组件时，如何才能呈现属性 to=""？

我正在考虑这样的事情，但这不起作用： (to ? ':to="to"' : '') 所以我需要一些其他的解决方案。

提前感谢您的提示。

干杯

【参考方案1】：

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

Attributes and v-bind

【讨论】：

我也是这么想的。感谢您的回答，我意识到该道具的默认值是空的：props: to: type: String, default: '', required: false , 我将默认值设置为false，现在一切正常。谢谢