Una de las cosas que más uso de Vue son las Computed Properties, estas permiten retornar datos a partir del cambio de una propiedad, con esa  premisa podemos jugar,  para el ejemplo tengo un listado de partidos, puntos , equipo, conferencia, equipo.

new Vue({
 el: '#app',
data: {
  team1:0,
   team2:0,
games:
    [
      { points: 11, vs: 'cavs', conf: 'west' },
      { points: 12, vs: 'celtics', conf: 'west' },
      { points: 13, vs: 'okc', conf: 'east' },
      { points: 21, vs: 'gsw', conf: 'east' },
    ]
}

Que son las Computed Props ?

Son funciones que son consumidas como propiedades y que son actualizadas cuando una propiedad de las que depende es modificada.

En el siguiente ejemplo si tengo una propiedad totalAccounts y si bankAccounts  es modificada por un método como addAccount entonces propiedad totalAccounts es actualizada.

computed: {
 totalAccounts: function(){
      return  this.bankAcconts.length;
   }
 }

Como usarlas ?

Un ejemplo mas real, nos solicitan que dependiendo de un valor debo mostrar el ultimo partido o todos , para esto primero agrego en data el listado de partidos.

new Vue({ el: '#app', data: {
 team1:0,
 team2:0, 
 games: [
 { points: 11, vs: 'cavs', conf: 'west' },
 { points: 12, vs: 'celtics', conf: 'west' },
 { points: 13, vs: 'okc', conf: 'east' },
 { points: 21, vs: 'gsw', conf: 'east' }
 ]
 }

Uso una propiedad computada que se encarga de retornar el listado cuando la propiedad ‘lastgame’ cambie su estado u la vinculare a un checkbox con v-model.

  <span>OnlyLast Game</span> <input type='checkbox' v-model='lastgame'/>

En el data de la aplicación agrego la propiedad ‘lastgame’ y definir el área de las computed properties, creo la propiedad LonzoGames, que es una función que a partir de el estado de lastgame retorna o el listado de juegos o solo el ultimo.

computed: {
 LonzoGames: function(param) {
    return this.lastgame ? this.games : this.games.slice(-1);
    }
 }

Cada vez que la propiedad lastgame es modificada , en LonzoGames tiene una referencia a ‘lastgame’  este retorna el listado de juegos a partir de la condición.

Filtrando

Podemos usar una computed property  para filtrar datos , usando el método filter del arrays, un select y usando v-model la vinculó a la propiedad ‘selectedConf’, luego uso un v-for para llenar los options.

<select v-model='selectedConf'>
 select a conference
 <option v-for='i in conf' v-bind:value='i'>
 {{i}}
 </option>

En data agrego el array con las conferencias y la propiedad selectedConf.

 data: {
 selectedConf:'',
 conf:['west','east',''],

Ahora modifico la propiedad computada ‘LonzoGames’ y esta al estar vinculada a selectedConf retorna una copia de games basado al filtro.

 computed: {
    LonzoGames: function() {
      return this.selectedConf ? this.games.filter(exp => exp.conf === this.selectedConf) : this.games;
 }

Ordenando

Las computed properties nos brinda una gran flexibilidad para sortear u ordenar datos, ya que podemos implementar la lógica que necesitemos que cumpla con los requisitos.

En este caso creo una propiedad sortby que cambiara de estado a partir de hacer click en “points”,

Utilizando la funcion sort de los arrays jugare para ordenar , para esto me creo una propiedad sortby la cual será igual a 1 cuando sea descendente y -1 ascendente, en el evento onclick del td hago una asignación en línea para la propiedad sortby.

v-on:click='sortby = sortby * -1 '

Cada vez que sortby cambia de valor nuestra propiedad y realiza el cálculo para retornar en forma ascendente o descendente.

Happy Vue;