代码之家 › 专栏 › 技术社区 › Giesburts

检查是否为vue.js中的属性提供了值

vuejs2 vue.js javascript

0

Giesburts · 技术社区 · 7 年前

我正在开发一个组件,我想在其中显示基于数据属性的徽章。为了向组件提供数据,我使用了一个道具。这个道具叫做 status 如果出现的话 0 或 1 是的。

现在我想检查这个值是否被显示,如果是,我想在组件中呈现一些html。最好的方法是什么?如果没有提供数据/值,我不想呈现HTML。

HTML格式

<span>
    <div class="circle-small" :class="{ 'validated': tab.status }"></div>
</span>

因此,我想呈现这个HTML只有当数据到道具'状态'是提供的。我试着用 v-if="tab.status" 但是通过这样做,当 地位 是 0个 是的。

使用 required 像这样的道具上的财产

status: {
    Type: Boolean,
    required: true,
},

也不会起作用,因为它实际上不需要使用这个道具。

支柱

status: {
    Type: Boolean,
},

有人有好的解决方案吗?

1 回复 | 直到 7 年前

1

2

Julian Paolo Dayag 7 年前

将默认值设置为 null 以下内容:

status: {
    Type: Boolean,
    default: null
},

然后您可以检查它是否像这样通过:

status !== null

这意味着道具 status 没有通过。