检查是否在Vue.js中为道具提供了值

Question

我正在一个组件上，我想根据数据属性显示一个徽章。为了向组件提供数据，我使用了道具。该道具称为status，如果存在，它将为0或1。

现在，我想检查是否显示了该值，如果存在，我想在组件中呈现一些html。做这个的最好方式是什么？如果未提供数据/值，我将不呈现html。

HTML

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

因此，我只想在提供道具“状态”的数据时呈现此html。我尝试使用v-if="tab.status"，但是这样做的话，当status的值为0时，html将不会呈现。

像这样在道具上使用required属性

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

也将不起作用，因为实际上不需要使用此道具。

道具

status: {
    Type: Boolean,
},

有人有好的解决方案吗？

Answer 1

将默认设置为null：

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

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

status !== null

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