检查是否为 Vue.js 中的 prop 提供了值

Question

我正在开发一个组件，我想在其中显示基于数据属性的徽章。为了向组件提供数据，我使用了一个道具。这个道具被调用status，如果存在，它将是0or 1。

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

HTML

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

因此，仅当提供了道具“状态”的数据时，我才想呈现此 html。我试过使用，v-if="tab.status"但通过这样做，当值为statusis时将不会呈现 html 0。

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

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

也不会工作，因为实际上不需要使用这个道具。

支柱

status: {
    Type: Boolean,
},

有人有好的解决方案吗？

Answer 1

将默认设置为null：

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

然后你可以检查它是否是这样通过的：

status !== null

这意味着 propstatus被传递了。