如何在 Vue.js 中根据条件添加或隐藏道具？

【问题标题】：How to add or hide prop based on condition in Vue.js?如何在 Vue.js 中根据条件添加或隐藏道具？
【发布时间】：2020-11-15 19:25:59
【问题描述】：

我有一个标题组件，其中有一些道具。

        <Header
              :next="gonext"
              :isSuccess
              ...
            />
    
    method: {
    isTshirt(){
    return this.productType ==='t-shirt'
    }
  }

如何检查上述 isTshirt 条件是否为真，然后删除 :next 道具及其值，否则使用该道具？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您可以在nextprop 中创建条件语句

:next="(isTshirt()) ? gonext : undefined"

或者您可以将上面的条件语句放在计算属性中。

【讨论】：

但是 undefined 会完全移除 prop，它会在控制台中显示一些关于 undefined 的警告吗？
请问你为什么要隐藏道具？因为您可以做的是转到您的 Header 组件并检查 prop next 是否为 undefined（或者您不需要），这样，next 在技术上是“隐藏的”，因为它是未定义的, 并且默认所有的 props 都是“可选的”。