Question

我在提出某些逻辑时遇到了问题。我有日期输入，但日，月和年是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;
}

现在默认情况下，页面加载时为false。现在，我有一部分输入仅在该人未满3岁时显示。因此，目前，我已将这些输入包装在div中

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

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

谢谢

Answer 1

一种实现方法是使isThreeOrOver函数在值为空时返回null。因此，您将具有三种状态：true，false和null。选择日期之前的负载值为空。

显示具有条件计算属性的输入

1 个答案: