Computed properties bruges til at oprette ny data ud fra eksisterende data. Det kan f.eks. være et array af data, hvor man kun vil have vist data, hvor noget bestemt er opfyldt.
// app.js
const app = Vue.createApp({
data() {
return {
albums: [
{ title: 'Wish you were here', artist: 'Pink Floyd' },
{ title: 'Black Clouds and Silber Linings', artist: 'Dream Theater' },
{ title: 'Alter Echo', artist: 'Dizz Mizz Lizzy' },
]
}
},
methods: {
},
computed: {
filteredAlbums () {
return this.albums.filter((album) => album.artist == 'Dizzy Mizz Lizzy')
}
}
})
app.mount('#app')Man kan så loope gennem filteredAlbums i stedet for albums i data med:
<!--html-->
<li v-for="album in filteredAlbums" @click="favToggle(album)">{{ album.artist }} - {{ album.title }}</li>Computed properties minder om methods. Der er dog nogle forskelle
- computed properties tager ikke argumenter
- hver eneste gang en methods bruges afvikles koden i den method, hvorimod en computed property kan bruges flere gange i samme template og kun afvikles én gang indtil der ændres i den data, der bruges i den computed property.
Hvornår skal man så bruge methods eller computed properties Luca Spezzano skriver på medium.com:
Methods
- funktioner, der kaldes med event i DOM
- funktioner, hvor der skal sendes argumenter med
Computed properties
- Når man skal oprette nyt data fra eksisterende data
- Når man skal referere værdier direkte i en template
- Når den samme funktion skal kaldes flere gange i samme template
- Introduktion til VueJS
- Vue – Events
- Vue – Methods
- Vue – Directives
- Vue – Attribute binding
- Vue – Computed properties
- Vue – refs
Læs mere om Vue
