JediBit

Mostrar o valor de uma variável em um template Vue é muitos simples, veja o código abaixo. Quero mostrar o último valor de um array de forma reversa.

<template>
  {{ array.reverse()[array.length - 1 ] }}
</template>

Provavelmente isso irá funcionar bem, mas o problema é quando precisarmos mostrar esse mesmo dado em outros lugares do nosso template, imagina a confusão e o quão feio poderá ficar o nosso código.

Por isso que para lógicas complexas assim, nós usamos dados computados.

var vm = new Vue({
  el: '#example',
  data: {
    array: [
      'Teste1',
      'Teste 2',
    ],
  },
  computed: {
    // uma função "getter" computada (computed getter)
    reversedArray: function () {
      // `this` aponta para a instância Vue da variável `vm`
      return this.array.reverse()[this.array.length - 1 ];
    }
  }
})

<template>
  {{ reversedArray }}
</template>

Viu como nosso código ficou mais simples e organizado?