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.
Vue HTML
<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.
JavaScript
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 ];
}
}
})Vue HTML
<template>
{{ reversedArray }}
</template>Viu como nosso código ficou mais simples e organizado?
