Computed properties

Las propiedades computadas siempre van a devolver algo, y siempre van a ejecutarse cada vez que una de las propiedades de las que hace uso cambie

Les comparto mi solución al problema de calcular la edad en base a la fecha de nacimiento.

<template>
  <div id="app">

    <input v-model="name" type="text">
    <input v-model="lastName" type="text">
    <input v-model="fechaNac" type="date">
    <h4>{{edad}}</h4>

  </div>
</template>
<script>
export default {
  data(){
  return{
    name:"",
    lastName:"",
    fechaNac:""
    }
  },
  computed:{
    edad() {
      let now = new Date().getFullYear();
      let anios= now - this.fechaNac.slice(0,4);
      return `${this.name} ${this.lastName} tiene ${anios} años`
    }
  }
  
}
</script>

Hola, no se porque veo un bug por que me toco restarle (- 1) a return de la propiedad de computo de age, para que de la edad exacta?

No puedo escribir mi codigo.

template:

input(type="date" v-model='bornDate')
p {{ calculateAge }}

data:

  data(){
    return{
      name: '',
      lastName: '',
      bornDate: ''
    }
  },

Funcion computada:

    calculateAge(){
      if(this.bornDate === '') return ''
      const today = new Date();
      const birthDate = new Date(this.bornDate);
      let age = today.getFullYear() - birthDate.getFullYear();
      let m = today.getMonth() - birthDate.getMonth();

      if(m < 0 || (m === 0 && today.getDate() < birthDate.getDate())){
        return age-1;
      }
      return age;
    }

Reto antes de ver el vídeo completo:

age() {
      return new Date().getFullYear() - this.dateBirth;
    }

Lo hice para calcular la edad (faltaría validar los meses)
HTML

#app
  input(v-model="fechaNacimiento" type="date" placeholder="Ingresa tu fecha de nacimiento")

  p(v-if="calcularEdad") Tu edad es de: {{ calcularEdad }} años

JS

new Vue({
  el: '#app',
  
  data () {
    return {
      edad:null,
      fechaNacimiento:null,
      fechaActual: new Date(),
    }
  },
  computed: {
    calcularEdad () {
      return  this.fechaNacimiento ? parseInt(this.fechaActual.getFullYear() - this.fechaNacimiento.slice(0,4)) : null
    }
  }
})

Así quedó mi App.vue

<template lang="pug">
  #app
    input(v-model="name")
    input(v-model="lastName")
    p {{ fullName }}
    input(type='date' v-model="fechaNacimiento")
    p {{ edad }}
</template>

<script>
  export default ({
    name: 'app',
    data () {
      return ({
        name: '',
        lastName:'',
        fechaNacimiento: ''
      })
    },
      computed: {
        fullName () {
          return `${this.name} ${this.lastName}`
        },
        edad () {
          const hoy = new Date()
          const fechaNac = new Date(this.fechaNacimiento) 
          const m = (hoy.getMonth() - fechaNac.getMonth())
          if (m < 0 || (m === 0 & hoy.getDate() < fechaNac.getDate())){
            return hoy.getFullYear() - fechaNac.getFullYear() - 1
          } 
          return hoy.getFullYear() - fechaNac.getFullYear()
        }
    
    }
  })

</script>
<style lang="scss">
@import './scss/main.scss'
</style>

Esta es mi solución

<template lang="pug">
  #app
    label.label Ingresa Fecha de Nacimiento
    input(v-model="fechaDeNacimiento")
    p {{ edad }}
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      msg: 'Hola simon',
      fechaDeNacimiento: '0'
    }
  },
  computed: {
    edad () {
      const year = new Date().getFullYear()
      return `${year - parseInt(this.fechaDeNacimiento)}`
    }
  }
}
</script>

<style lang="scss" scoped>
label{
  display: block;
}
</style>

<template lang="pug" >
#home
  label.label Año de nacimiento
    input.input(v-model="nacimiento" type="date")
    label.label Edad Actual
  p(v-if="nacimiento != ''" ) {{ edad}}
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      nacimiento: ''
    }
  },
  computed: {
    edad () {
      var hoy = new Date()
      var fecha = hoy.getFullYear() + '-' + (hoy.getMonth() + 1) + '-' + hoy.getDate()
      console.log(fecha, this.nacimiento)
      var resta = Date.parse(fecha) - Date.parse(this.nacimiento)
      return Math.round(resta / (1000 * 60 * 60 * 24 * 365))
    }
  },
  components: {}
}
</script>```

¿Cómo tener propiedades asíncronas, que sean seteadas a partir de un servicio?
Soy nuevo en Vue, disculpa si es una pregunta muy básica.
Muchas gracias.

input(type="date" v-model="date")
    p {{ age }}

data () {
    return {
      date: ''
    }
  },
  computed: {
    age () {
      if (this.date === undefined || this.date === null || this.date.trim() === '') {
        return ''
      }
      var date = new Date(`${this.date} 00:00:00`)
      var now = new Date()

      var age = now.getFullYear() - date.getFullYear()
      if (date.getMonth() > now.getMonth()) {
        age--
      } else if (date.getDate() > now.getDate()) {
        age--
      }

      if (age > 1) {
        return `${age} años`
      }

      return `${age} año`
    }
  }

<template>
<div id=“app”>
<input v-model=“date” type=“date”>
<h1>{{ ageVal }}</h1>
</div>
</template>

<script>
export default {
name: ‘app’,
data () {
return {
date: ‘’
}
},
computed: {
ageVal () {
var today = new Date()
var birthDate = new Date(this.date)
var age = today.getFullYear() - birthDate.getFullYear()
var m = today.getMonth() - birthDate.getMonth()
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age–
}
return age

}

}
}
</script>

omputed: {
    fullName () {
      return `${this.name} ${this.lastName}`
    },
    getBirt () {
      let birthday = new Date(this.birthday)
      let ageDifMs = Date.now() - birthday
      let ageDate = new Date(ageDifMs)
      if (ageDate.getUTCFullYear() - 1979 > 0) {
        let result = Math.abs(ageDate.getUTCFullYear() - 1970)
        let msg = 'años'
        return `${result} ${msg}`
      }
    }
  }

computed: {
    fullName () {
      return `${this.name} ${this.lastName}`
    },
    getBirt () {
      let birthday = new Date(this.birthday)
      let ageDifMs = Date.now() - birthday
      let ageDate = new Date(ageDifMs)
      if (ageDate.getUTCFullYear() - 1979 > 0) {
        let result = Math.abs(ageDate.getUTCFullYear() - 1970)
        let msg = 'años'
        return `${result} ${msg}`
      }
    }
  }

mi solución, vagando encontré esta librería momentjs

primero la instale:

npm install momment --save

el codigo:

<template lang="pug">
  #app.contenedor
    p {{ title }}
    input.input(v-model="fechaNacimiento")
    p tu fecha de nacimiento es:
      strong(v-if="validarFecha" class="fechaIncorrecta") &nbspPor favor introduce una fecha valida
    br
    p Tu Edad es:
      strong {{ edadActual }}
</template>

<script>
const moment = require('moment')
export default {
  name: 'app',
  data () {
    return {
      title: 'Introduce tu fecha de cumpleaños',
      fechaNacimiento: '',
      fechaActual: moment().format(),
      fechaCorrecta: false
    }
  },
  computed: {
    fullName () {
      return `${this.name} ${this.lastname}`
    },
    validarFecha () {
      return !moment(this.fechaNacimiento).isValid()
    },
    edadActual () {
      return moment(this.fechaNacimiento).toNow()
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>

Saludos.

<template lang="pug">
  #app
    input(v-model="name")
    label Nombre
    input(v-model="lastName")
    label Apellido
    p {{ fullName }}
    select(v-model="daySelected")
      option(v-for="day in days" v-model="days") {{ day }}
    label Día
    select(v-model="monthSelected")
      option(v-for="month in months" v-model="months") {{ month }}
    label Mes
    select(v-model="yearSelected")
      option(v-for="year in years" v-model="years") {{ year }}
    label Año
    p Su edad es {{ age }}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: '',

      lastName: '',

      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],

      daySelected: 0,
      monthSelected: 0,
      yearSelected: 0,

      lastYear: new Date().getFullYear(),
      lastMonth: new Date().getMonth(),
      lastDay: new Date().getDate()
    }
  },
  computed: {
    fullName() {
      return `${this.name} ${this.lastName}`
    },
    days(){
      let allDays = []
      for(let i = 1; i <= 31; i++){
        allDays[i-1] = i
      }
      return allDays
    },
    years(){
      let allYears = []
      for(let i=0;i<= 150;i++){
        allYears[i] = this.lastYear - i;
      }
      return allYears
    },
    age(){
      let agnos = this.lastYear - this.yearSelected

      if((this.monthSelected < this.lastMonth) || (this.monthSelected == this.lasMonth && this.daySelected < this.lastDay)){
        agnos--
      }
      return agnos
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>

Aquí comparto mi solución:

<template>
    <div class="container my-3">
        <div class="row">
            <div class="col-12">
                <label for="">Fecha de nacimiento</label>
                <input type="date" min="01-01-1970" v-model="fecha_nac" class="form-control mb-3" v-on:change="calcEdad()">

                <p><b>Tu edad es: </b>{{ edad }}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            fecha_nac: '',
            edad: 0
        }
    },
    methods: {
        calcEdad(){
            let nac = new Date(this.fecha_nac)
            let hoy = new Date()
            let anio = hoy.getFullYear() - nac.getFullYear();

            if(nac.getMonth() >= hoy.getMonth()){
                if(hoy.getDate() < nac.getDate()){
                    anio--;
                }
            }

            this.edad = anio;
        }
    }
}
</script>
<style lang="scss">
    @import './scss/main.scss';
</style>

Ahí va mi codigo:

<template lang='pug'>
  #app
    h2 Computed Properties
    p Computed Properties son propiedades que se calculan a partir de los valores de otras propiedades, esto quiere decir que podemos crear propiedades dinámicas que van a ser regeneradas cada vez que otras propiedades cambien su valor.
    hr
    //-Permite propiedades dentro de v-model con los elementos inputs del html. Perimte al usuario ingresar info
    p Nombre:
    input(v-model="name")
    p Apellido:
    input(v-model="lastName")
    p {{ fullName }}
    hr
    p Año de Nacimiento:
    input(v-model="aNacimiento")
    p Año Actual:
    input(v-model="aActual")
    h3 Tu edad actual es:
    p {{ edadActual }} años

  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      name:'',
      lastName:'',
      aNacimiento:'',
      aActual:''
    }
  },
  computed: {
    fullName() {
      return `${this.name} ${this.lastName}`
    },
    edadActual() {
      return this.aActual - this.aNacimiento
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
input {
  padding: 5px;
  margin: 4px;
}
</style>

input(v-model="fechanacim" type="date")    
p {{ edad }}

 edad () {
      let fecha = Date.parse(this.fechanacim)
      let today = Date.now()
      let onYear = 1000 * 60 * 60 * 24 * 365
      return Math.floor((today - fecha) / onYear)
    }

Listo

<template lang="pug">
  #app  
    h1  Calcular edad a partir de la fecha de nacimiento con Vue.JS
    //- HelloWorld
    input(v-model="fecha" type="date" class="input")
    br
    br
    p
      | Su edad es:
      h2  {{CalcularEdad}}
      | años
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data(){
    return {
      fecha: '1996-07-28',
      edad: ''
    }
  },
  computed: {
    CalcularEdad () {
      var birthday_arr = this.fecha.split("-");
      // console.log(birthday_arr);
      
      var birthday_date = new Date(birthday_arr[0], birthday_arr[1] - 1, birthday_arr[2]);
      var ageDifMs = Date.now() - birthday_date.getTime();
      var ageDate = new Date(ageDifMs);
      return Math.abs(ageDate.getFullYear() - 1970);
    }
  },
}
</script>```

Les comparto mi Solución:

<template>
<div class="container">
	<div class="section">
		<div class="field">
			<label class="label">Ingresa tu Fecha de Nacimiento:</label>
			<div class="control">
				<input class="input" max="2017-12-31" type="date" placeholder="Text input" v-model="fechaNacimiento">
			</div>

			<p>{{`Tu Edad es de: ${calcularEdad} años`}}</p> <br>
			<p><strong>Nota:</strong> Éste programa solo calcula años de vida.</p>
		</div>
	</div>
</div>
		 
</template>

<script>

export default {
	name: "birthdate",
	data(){
		return{
			fechaNacimiento: ''
		}
	},
	computed:{
		calcularEdad (){

			//Variables de fecha de nacimiento
			let birth 	= this.fechaNacimiento.split('-')
			let year 	= birth[0];
			let month  	= birth[1];
			let day 	= birth [2];

			//variables de fecha actual
			let today  			=  new Date()
			let currentYear 	=  today.getFullYear()
			let currentMonth 	=  (today.getMonth() + 1)
			let currentDay 		=  today.getDate()
			
			let edad = 0;
			
			if (currentMonth < month ) {
					edad = (currentYear - year) - 1;
			}else if (currentMonth == month) {
				if (currentDay < day ) {
					edad = (currentYear - year) - 1;
				}else {
					edad = (currentYear - year)
				}	
			}else if (currentMonth > month) {
				edad = (currentYear - year)
			}	

			return edad;
		}
	}  
}

</script>

Mi codigo:)

<template lang="pug">
  #app
    input(v-model="name")
    input(v-model="lastName")
    input(v-model="birthday" type="date")
    P {{fullName}}
    p {{edad}}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: '',
      lastName: '',
      birthday: ''
    }
  },
  computed: {
    edad () {
      let birthday = new Date(this.birthday)
      let now = new Date()
      return new Date(now - birthday).getFullYear() - 1970
    },
    fullName () {
      return `${this.name}  ${this.lastName}`
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>```

Mi solución

<template>
  <div id="app">
    <input type="text" v-model="day" placeholder="day">
    <input type="text" v-model="month" placeholder="month">
    <input type="text" v-model="year" placeholder="year">
    <p>Tu edad es: {{ age }}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      day: '',
      month: '',
      year: ''
    }
  },
  computed: {
    age () {
      let now = new Date();
      let age = now.getFullYear() - this.year;
      if ((now.getMonth() + 1) <= this.month && now.getDate() < this.day) {
        age--;
      }

      return age;
    }
  }
}
</script>

Usé la biblioteca ager para el cáculo de la edad. El resultado final fue el siguiente:

El código es el siguiente:

<template lang="pug">
#app
  p Fecha de nacimiento:
    input(type="date" v-model="birthDate")
  p Edad: {{ calcAge }} años
</template>

<script>
import age from 'ager'
export default {
  name: 'App',
  data () {
    return {
      birthDate: null
    }
  },
  computed: {
    calcAge () {
      return age(new Date(this.birthDate))
    }
  }
}
</script>

El input y output

 input(v-model="fecha" type="date")
  p {{ birthDay }}

La lógica

birthDay () {
      let fech = new Date(this.fecha).getFullYear()
      let now = new Date()
      let year = now.getFullYear()
      let age = year - fech
      return `Tu tienes ${age} años de edad`
    }

Solución:

<template lang="pug">
  #app
    label(for="date") Fecha de nacimiento:
    input#date(type="date" v-model="nacimiento")
    p Tu edad actual es: {{ edad }}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      nacimiento: ''
    }
  },
  methods: {
    miliseguntos2años (miliseguntos) {
      return parseInt(miliseguntos / 31536000000)
    }
  },
  computed: {
    edad () {
      const hoy = new Date()
      const nacimiento = this.nacimiento.replace(/-/g, '/')
      const fechaNacimiento = new Date(nacimiento)
      const diferencia = hoy - fechaNacimiento

      return this.miliseguntos2años(diferencia)
    }
  }
}
</script>

<style lang="scss">
#app {
  label {
    display: block;
  }
}
</style>

Solución usando el método: getFullYear:

<template lang="pug">
  #app
    label(for="date") Fecha de nacimiento:
    input#date(type="date" v-model="nacimiento")
    p Tu edad actual es: {{ edad }}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      nacimiento: ''
    }
  },
  computed: {
    edad () {
      const hoy = new Date().getFullYear()
      const nacimiento = new Date(this.nacimiento).getFullYear()
      return hoy - nacimiento
    }
  }
}
</script>

<style lang="scss">
#app {
  label {
    display: block;
  }
}
</style>

Mi aporte
https://cjimd90.github.io/profesionalvue/computedproperties

Mi solucion

<template>
  <div id="app">
     <input type="text" v-model="name">
     <input type="text" v-model="lastname">
     <input type="number" v-model="year">

     <p>{{ fullname }}</p>
     <p v-show="age">Tu tienes {{ calcAge }} años</p>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
     return {
        name: '',
        lastname: '',
        year: ''
     }
  },
  computed: {
     fullname() {
        return `${this.name} ${this.lastname}`;
     },
     calcAge: function() {
        if (this.year === '') {
           this.age = false;
        } else if (this.year.length > 1) {
           this.age = true;
           return `${new Date().getFullYear() - this.year}`;
        }
     }
  }
}
</script>

<style lang="scss">
   @import './scss/main.scss'

</style>```

No se si mi solución esta muy refactorizada o muy simple pero hice esto.

Para el PUG

input(v-model="name" placeholder="Ingresa tu Nombre")
     input(v-model="lastName" placeholder="Ingresa tu Apellido")

     
     h1 ¿Cual es tu fecha de nacimiento?
     input(v-model="day" placeholder="Ingresa Dia")
     input(v-model="month" placeholder="Ingresa Mes")
     input(v-model="year" placeholder="Ingresa Año")

     p {{'tu nombre es:' + fullName + ' ' + ' y tu edad es  ' + ' ' + ageCalculator + ' '  + 'años'}}

para el JS

export default {
  name: "App",
  data() {
    return {
      name: "",
      lastName: "",
      day: "",
      month: "",
      year: ""
    };
  },
  computed: {
    fullName() {
      return this.name + " " + this.lastName;
    },

    ageCalculator() {
      let actualYear = new Date().getFullYear();
      let age = actualYear - this.year;

      if (age === actualYear) {
        age = 0;
      }

      return age;
    }
  }
};

Mi solución:

<template>
  <div id="app" class="centrado">
    <input v-model="nombre" placeholder="Nombre">
    <input v-model="apellido" placeholder="Apellido">
    <input v-model="año" placeholder="Año de nacimiento">
    <p v-show="edad">{{ fullname }} nació en el {{ año }} y tiene {{ calculadoraEdad }} años</p>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      nombre: "",
      apellido: "",
      año: ""
    };
  },
  computed: {
    fullname() {
      return `${this.nombre} ${this.apellido}`;
    },
    calculadoraEdad: function() {
      if (this.año === "") {
        this.edad = false;
      } else if (this.año.length > 1) {
        this.edad = true;
        return `${new Date().getFullYear() - this.año}`;
      }
    }
  }
};
</script>
<style>
.centrado {
  text-align: center;
  margin-top: 20%;
}
body {
  background-color: darkgray;
}
</style>

<template lang="pug">
  #app
    h1 {{msg}}
    input(v-model='name')
    input(v-model='lastName')
    input(v-model='edad' placeholder='año en que naciste')
    p {{fullName}}
    p {{edadCalculator}}

</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'hola vue',
      name:'',
      lastName: '',
      edad:''
    }
  },
  computed: {
    fullName () {
      return `${this.name} ${this.lastName}`
    },
    edadCalculator () {
      let yearActual = 2019
      if(this.edad == ''){
        console.log('calcula tu edad');
      }else{
       let result = yearActual - this.edad
       return result
      }
    }
  }
}
</script>

Usando moment es mas exacto:

<template lang="pug">
  #app
    p Nombre
    input(v-model="name")
    br
    br
    p Apellidos
    input(v-model="lastname")
    br
    p Nombre completo: {{ fullName }}
    br
    br
    p Fecha de nacimiento
    input(v-model="birthday", placeholder="aaaa-mm-dd")
    br
    p Edad: {{ Age }}

</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hola Mundo!',
      name: '',
      lastname: '',
      birthday: ''
    }
  },
  computed: {
    fullName(){
      return  `${this.name} ${this.lastname}`
    },
    Age(){
      const moment = require('moment')
      if(this.birthday.length === 10){
        let fecha = moment(this.birthday)
        let hoy = moment()
        return `${hoy.diff(fecha, 'years')} años.`
      }else{
        return ''
      }
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
  #app {
    margin-top: 5%;
    margin-left: 5%;
    max-width: 420px;
  }
  h1 {
    color: #A3ECF3;
    font-size: 20px;
    font-weight: bolder;
    text-align: center
  }
  img {
    margin:10px auto;
		display:block;
  }
  .label{
    color:#FF9300;
    font-size: 11px;
  }
  .input{
    border: none;
    border-bottom: 1px solid #FF9300;
    box-shadow: none !important;
    color:#212121;
  }
  p{
    margin: 15px 15px;
  }
</style>

<template lang="pug">
  #app
    input(v-model='age' placeholder='año en que naciste')
    p Tu edad {{ageCalculator}}

</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      age:''
    }
  },
  computed: {
    ageCalculator () {  
      if(this.age === ""){
        return 0
      } else {
        return `${new Date().getFullYear() - this.age}`
      }
    }
  }
}
</script>

Mi solución para calcular la edad:

<template lang="pug">
  #app
    p Name
    input(v-model="name")
    br
    p Last name
    input(v-model="last_name")
    br
    p Full name: {{ fullName }}

    br
    p Birthday
    input(v-model="birthday" placeholder="YYYY-MM-DD")
    p {{ todayAge }}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name: '',
      last_name: '',
      birthday: ''
    }
  },

  computed: {
    fullName () {
      return `${ this.name} ${ this.last_name }`;
    },

    todayAge () {
      let date_birth = this.birthday;
      let actual_date = new Date();
      let current_year = actual_date.getFullYear()
      if(date_birth.match(/^[\d0-9]{4}[-]+[\d0-9]{2}[-]+[\d0-9]{2}$/)){
        let year = date_birth.split('-')[0];
        let age = current_year - year;
        return (age > 0 ? `Actual age: ${ age }` : `Only dates before ${ current_year }`);
      } else {
        return 'Birthday format doesn\'t match';
      }
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss';
</style>```

Se que hay mejores maneras pero me sentí comodo con esta

<template>
  <div id='app'>
    <input type="text" v-model="datetime">

    <p>{{ AgeAct }}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      datetime: ''
    }
  },

  computed: {
    AgeAct () {
      let pastDate = '0'
      if (!isNaN(this.datetime)) {
        pastDate = this.datetime
      }
      const d = new Date()
      const nowDate = d.getFullYear()
      let total = parseInt(nowDate) - parseInt(pastDate)
      if (isNaN(total)) {
        total = 0
      }
      return `Edad: ${total}`
    }
  }
}
</script>

Otra Aproximación a la solución…

<script>
export default {
  name: 'App',
  data () {
    return {
      msg: 'Registro Estación Platzi',
      BtnName: 'Enviar!',
      NameField: 'Nombre',
      LastNameField: 'Apellido',
      PositionField: 'Cargo',
      FechaCumpleanos: '1991-08-01',//new Date().toLocaleDateString(),
      }
    },
      computed: {
        Edad() {
          var anos = 0
          var cumpleanos = new Date(this.FechaCumpleanos)

          var Mes = cumpleanos.getMonth()
          var Ano = cumpleanos.getFullYear()
          var Dia = cumpleanos.getDate()
          var hoy = new Date()

          anos = hoy.getFullYear() - Ano
          if (Mes > hoy.getMonth() || (Mes == hoy.getMonth() && Dia > hoy.getDate())) {
            anos--
          }
          return anos
        },
        FullName() {
          return `${this.NameField} ${this.LastNameField}`
        },
        Mensaje() {
          return  `Hola ${this.FullName}, Tu edad es ${this.Edad}`
        },
        Mensaje2() {
          return  `Tu cargo es ${this.PositionField}.`
        }
      }
  }

</script>```

<div id="app">
  <label>Ingresa el día de tu nacimiento</label>
  <input type="text" v-model="dia"/> <br/>
  <br>
  <label>Ingresa el mes de tu nacimiento</label>
  <input type="text" v-model="mes"/> <br/>
  <br>
  <label>Ingresa el año de tu nacimiento</label>
  <input type="text" v-model="year"/> <br/>
  
  <p>
    tu edad es {{edad}}
  </p>
</div>

new Vue({
  el: "#app",
  data: {
   	dia: null,
    mes: null,
    year: null
  },
  methods: {
  	
  },
  computed: {
  	edad(){
    	var hoy = new Date();
    	var cumpleanos = new Date(this.year,this.mes,this.dia);
    	var edad = hoy.getFullYear() - cumpleanos.getFullYear();
    	var m = hoy.getMonth() - cumpleanos.getMonth();

     if (m < 0 || (m === 0 && hoy.getDate() < cumpleanos.getDate())) {
        edad--;
     }

   	 return edad;
 		}
  }
  
})

Reto conmpletado

<template lang="pug">
  #app
    input(v-model="bornDay" type="date")
    p {{currentAge}}
</template>

<script>
export default {
  name: null,
  data () {
    return {
      bornDay: ''
    }
  },
  computed: {
    currentAge (){
      const date = new Date();
      const nacimiento = new Date(Date.parse(this.bornDay));
      const milisecondsInYear = 1000*60*60*24*365;
      const edad = ((date - nacimiento)/milisecondsInYear).toFixed(0);
      return (edad > 0) ? `Tu edad es: ${edad}` : 'Ingresa una fecha';
    }
  }
}
</script>

<style lang="scss">
@import "./scss/main.scss";
</style>

No soy muy bueno en Js pero ahí va…

<script>
  export default {
    name: 'app',
    data () {
      return {
        name: '',
        lastName: '',
        diaNac:'',
        mesNac:'',
        añoNac:''
      }
    },

    computed:{
      fullName(){
        return `${this.name} ${this.lastName}`
      },
      edadCalculator(){
        var hoy = new Date();
        var edad = hoy.getFullYear() - this.añoNac;

        if(this.mesNac > (hoy.getMonth()+1)){
          return edad + 1;
        }
        if(this.mesNac < (hoy.getMonth()+1)){
          return edad;
        }
        if(this.mesNac = (hoy.getMonth()+1)){
          if(this.diaNac <= hoy.getDate()){
            return edad + 1;
          }else{ return edad; }
        }

      }
    }
  }
</script>

<template lang="pug">
  #app
    label(for="name") {{ 'Nombre' }}
    input(v-model="name")
    label(for="lastname") {{ 'Apellido' }}
    input(v-model="lastname")
    p {{'Nombre completo:' + fullname }}
    label(for="dia") {{ 'Dia:' }}
    input(v-model="dia" type="number")
    label(for="mes") {{ 'Mes:' }}
    input(v-model="mes" type="number")
    label(for="año") {{ 'Año:' }}
    input(v-model="año" type="number")
    p {{'Tu edad es de: ' + edad + ' Años'}}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hola desde vuejs!',
      name: '',
      lastname: '',
      dia: null,
      mes: null,
      año: null
    }
  },
  computed: {
    fullname () {
      return `${this.name} ${this.lastname}`
    },
    edad () {
      var hoy = new Date()
      var miFecha = new Date(this.año, this.mes, this.dia)
      var diff = hoy.getTime() - miFecha.getTime()
      return Math.floor(diff / (1000 * 60 * 60 * 24 * 365))
    }
  }
}
</script>

<style lang="scss">
  @import './scss/main.scss'
</style>

Cual es la diferencia entre computed y method?

**Computed Properties **son son propiedades que se calculan a partir de los valores de otras propiedades, esto quiere decir que podemos crear propiedades dinámicas que van a ser regeneradas cada vez que otras propiedades cambien su valor.

Un metodo computed son valores que se calculan a partir de varias propiedades es decir pueden mutar una propiedad sin manipularla directamente.

Solo lo hice con años:

Dentro del template:

input(v-model="fechaNac")
p {{ calculateAge }}

Dentro de data()

fechaNac: ' '

Dentro de computed:

calculateAge(){
      return 'La edad es: ' + (2020 - this.fechaNac)
}

<template lang="pug">
  #app
    input(v-model="yourYear" placeholder="escribe el año en el que naciste" type="number")
    br
    p {{ FullName }}
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      yourYear: '',
    }
  },

  computed: {
    FullName() {
      if(this.yourYear === '') {
          return 'NO HAS REGISTRADO TU FECHA DE NACIMIENTO COMPLETA';
      } else if(this.yourYear <= 0) {
          return 'NO HAS REGISTRADO TU EDAD EN UN FORMATO VALIDO';
      }
      let resultYear = 2020 - this.yourYear;
      return `TU EDAD ES: ${resultYear} AÑOS`;
    }
  },
}
</script>

Cómo se hacen las computed properties para operaciones asíncronas, o cómo puedo modificar una propiedad de manera asíncrona?

<template>
  <div id="app">
    <p>Ingresa tu fecha de nacimiento</p>
    <input type="number" v-model="YearOfBirth" />
    <p>Tienes Aproximadamente {{ calcAgeOfBirth }} años</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      YearOfBirth: ' ',
      ActualYear: 2020
    }
  },
  computed: {
    calcAgeOfBirth() {
      return this.ActualYear - this.YearOfBirth
    }
  }
}
</script>

<style lang="scss">
#app {
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
  * {
    font-family: 'Roboto', sans-serif;
  }
}
</style>

Solución

<template lang="pug">
  #app
    input(v-model="date" type="date")
    p {{calculatedAge}}
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      date: ''
    }
  },

  computed:{
    calculatedAge(){
      var today = new Date();
      if(Number(today.getMonth())+1 > Number(this.date.split("-")[1]))
        return Number(today.getFullYear()) - Number(this.date.split("-")[0]);
      else if(Number(today.getMonth())+1 < Number(this.date.split("-")[1]))
        return (Number(today.getFullYear()) - 1)  - Number(this.date.split("-")[0]);
      else if(Number(today.getDate()) > Number(this.date.split("-")[2]))
        return (Number(today.getFullYear()) - 1)  - Number(this.date.split("-")[0]);
      else
        return Number(today.getFullYear()) - Number(this.date.split("-")[0]);
    }
  }

}
</script>

Mi pobre solucion:

<template lang="pug">
  #app
    img(src="./assets/logo.png")
    h1 {{ firstname }}
      input(v-model="name")
      p {{ name }}
      br
      a(:href="url" target="_blank") Click me 
      br
      br
    h1 {{ lastname}}
      input(v-model="lastName")
      p {{ lastName }}
      br
    h1 {{ msg }}
      input(v-model="currentAge")
      br
      br
    h1 {{ msg2 }}
      input(v-model="dob")
      br
      span(class="span") {{ calculateActualAge }}

      

</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstname: "Firts Name",
      lastname: "Last Name",
      name: "",
      lastName: "",
      url: "https://www.google.com",
      dob: "",
      currentAge: "",
      msg: "Type the year you born",
      msg2: "Type the current Year",
    };
  },
  components: {},
  methods: {
    // showFullName() {
    //   console.log(`${this.name} ${this.lastName}`);
    // },
  },
  computed: {
    showFullName() {
      return `${this.name} ${this.lastName}`;
    },
    calculateActualAge() {
      return this.dob - this.currentAge;
    },
  },
};
</script>

<style lang="scss">
@import "./scss/main.scss";
.button {
  background-color: brown;
}
.span {
  background: chocolate;
}
</style>

Mi solución!
Primero ejecutar en terminal: npm i moment-timezone

<template lang="pug">
  #app
    div Fecha de nacimiento: 
    input(v-model="fechaNacimiento" placeholder="Ej.: 25/10/1992")
    p(v-show="hasComputedEdad") Este año has cumplido o cumplirás {{ edad }} años!
</template>

<script>
import * as moment from "moment-timezone";

export default {
  name: 'app',
  data () {
    return {
      fechaNacimiento: ''
    }
  },
  computed : {
    edad () {

      let edadCalculada = undefined;

      const inputDate = this.fechaNacimiento;
      const formatInputDate = "DD/MM/YYYY";

      try {
        const dateMomentTimeZone = moment.tz(inputDate, formatInputDate, true, "America/Lima");
        if (!dateMomentTimeZone.isValid()) {
          throw new Error(`Fecha ${inputDate} en formato ${formatInputDate} no es una fecha v\u00e1lida.`);
        }

        const anioNacimientoString = dateMomentTimeZone.format("YYYY");
        const anioNacimiento = parseInt(anioNacimientoString);

        const anioActual = parseInt(moment().tz("America/Lima").format("YYYY"));

        edadCalculada = anioActual - anioNacimiento;

      } catch (err) {
        
      }

      return edadCalculada;
    },
    hasComputedEdad () {
      return this.edad;
    }
  }
}
</script>

<template lang="pug">
  .container
    input(v-model="name").input

    input(v-model="lastName").input

    label Elija su fecha de nacimiento
    input(v-model="age" type="date").input

    p {{ getFullName }}

    p {{ userAge }}
</template> 

  computed: {
    getFullName() {
      return ` ${this.name.toUpperCase()}  ${this.lastName.toUpperCase()}`;
    },
    userAge() {
      if (this.age == null) {
        return "Elija una fecha";
      } else {
        var now = new Date().getFullYear();
        var birtdate = new Date(this.age).getFullYear();
        return now - birtdate;
      }
    }
  }

La función Age, la edad se obtiene de un input tipo date y con substr extraigo el año. Retorna el año actual menos el año de nacimiento

    age () {
      const fecha = new Date()
      const year = fecha.getFullYear()
      const nacimiento = this.person.fechaNaciemiento.substr(0, 4)
      return year - nacimiento
    }

input(v-model="day" placeholder="fecha de Nacimiento" type="day")
    input(v-model="month" placeholder="fecha de Nacimiento" type="month")
    input(v-model="year" placeholder="fecha de Nacimiento" type="day")

data(){
return {
  day: this.day,
      month: '',
      year: this.year
}
},
computed:{
	añosCount () {
      let añoActual = new Date().getFullYear()
      return (añoActual - Number.parseInt(this.year))
    }
}

Reto finalizado
input:

	<label>birth year</label>
	<input type="text" v-model="birthyear" />
	<p>{{ age }}</p>

computed propertie:

age() {
	const year = 2021
	return this.birthyear.length === 0 ? 0 : year - this.birthyear
}

<template lang="pug">
  #app
    input(v-model="name")
    input(v-model="birth")

    p {{ name }}
    p {{ age }}
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      name: '',
      birth: ''
    };
  },

  computed: {
    name () {
      return `${this.name}`
    },

    age () {
      // return `${this.name} ${this.age}`
      return new Date(new Date() - new Date(this.birth)).getUTCFullYear() - 1970
    }
  }
};
</script>

<template lang="pug">
  #app
    input(v-model="name")
    input(v-model="lastName")

    p {{fullName}}
    label ¿Cúal fue el año en que naciste?
    input(v-model="cumpleaños")
    p Tu edad es: {{ birthday }}
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      name: "",
      lastName: "",
      cumpleaños: "",
      year: 2021
    };
  },

  computed: {
    fullName() {
      return `${this.name} ${this.lastName}`;
    },

    birthday() {
      return this.year - this.cumpleaños;
    }
  }
};```