Created
December 11, 2018 19:10
-
-
Save tygerbytes/9b74bdea68fb22fa62f0401f01630966 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
... | |
<input type="text" | |
v-model="fiveKmRaceTime" | |
v-bind:class="{ | |
'form-control': true, | |
'is-invalid': this.invalidRaceTime }" | |
placeholder="A recent 5K race time, like 21:30" /> | |
<div class="invalid-feedback">{{ this.raceTimeValidationMessage }}</div> | |
... | |
</template> | |
... | |
<script> | |
export default { | |
name: 'RunbyPace', | |
... | |
computed: { | |
missingRaceTime() { | |
return this.submitted && this.fiveKmRaceTime === ''; | |
}, | |
invalidRaceTime() { | |
return this.missingRaceTime || | |
(this.submitted && !this.lib.validTime(this.fiveKmRaceTime)); | |
}, | |
raceTimeValidationMessage() { | |
if (this.missingRaceTime) { | |
return 'Don\'t forget your 5K race time'; | |
} | |
if (this.invalidRaceTime) { | |
return `'${this.fiveKmRaceTime}' is not a valid race time. Try 21:44.`; | |
} | |
return '5K Valid'; | |
}, | |
} | |
... | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment