CODEWITHSUNDEEP
vue.jsvuejs2
katie hudson
katie hudson

Reputation: 2893

Display inputs with conditional computed property

I am having an issue coming up with the logic for something. I have a date input, but the day, month and year are 3 seperate input fields

<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"
/>

I then have a computed property that calculates if they are 3 years old

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

Now by default, on page load, this will be false. Now I have a section of inputs that should only display if the person is under 3. So at the moment I have wrappped the inputs in a div

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

Now the problem with the above is on page load, the default for isThreeOrOver is false, so it will display the inputs. How can I hide them by default, until the computed property changes based on live input?

Thanks

Upvotes: 0

Views: 117

Answers (1)

Kalimah
Kalimah

Reputation: 11437

One way you can do that is by making isThreeOrOver function returns null when values are empty. So you would have three states: true, false and null. Null would be the value on load before the dates are selected.

Upvotes: 1

Related Questions