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

Question

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

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

HTML

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

所以我想仅在提供了“status”属性的数据时才渲染此 html。我尝试使用 v-if="tab.status" 但通过这样做，当 status 的值为 0< 时，将不会呈现 html/。

像这样在 prop 上使用 required 属性

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

也不起作用，因为实际上不需要使用这个 Prop 。

Prop

status: {
    Type: Boolean,
},

有人有好的解决方案吗？

Answer 1

将默认值设置为null:

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

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

status !== null

这意味着属性status已通过。