显示带有条件计算属性的输入答案

【问题标题】：Display inputs with conditional computed property显示带有条件计算属性的输入
【发布时间】：2019-11-17 21:31:38
【问题描述】：

我在想出某事的逻辑时遇到了问题。我有一个日期输入，但日、月和年是 3 个单独的输入字段

<b-form-input
    id="dob-date"
    v-model="$v.form.date.$model"
    placeholder="DD"
    aria-labelledby="dob-date-label"
/>

<b-form-input
    id="dob-month"
    v-model="$v.form.month.$model"
    placeholder="MM"
    aria-labelledby="dob-month-label"
/>

<b-form-input
    id="dob-year"
    v-model="$v.form.year.$model"
    placeholder="YYYY"
    aria-labelledby="dob-year-label"
/>

然后我有一个计算属性来计算他们是否 3 岁

isThreeOrOver() {
  const age = getDateData(`
    ${this.form.year}/
    ${this.form.month}/
    ${this.form.date}
  `);
  return age >= 3;
}

现在默认情况下，在页面加载时，这将是错误的。现在我有一部分输入应该只在这个人小于 3 岁时才显示。所以目前我已经将输入包装在一个 div 中

<div v-if="(isThreeOrOver === false)">
    //additional inputs
</div>

现在上面的问题在于页面加载，isThreeOrOver 的默认值为 false，所以它会显示输入。如何在默认情况下隐藏它们，直到计算的属性根据实时输入发生变化？

谢谢

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

您可以做到这一点的一种方法是使isThreeOrOver 函数在值为空时返回null。所以你会有三种状态：真、假和空。 Null 将是在选择日期之前加载的值。

【讨论】：