Working with Vue.js, I have a component that cleans up some content using a method and displays the results within HTML tags:
<template>
....
<div v-for="(value) in mydata">
<h2>{{ prettifyMyNumber(value) }}</h2>
</div>
...
</template>
The current code for the method looks like this:
export default {
// ...
methods: {
prettifyMyNumber(num) {
// perform calculations
return 23;
}
}
}
I now want to modify the method to separate the integer and float parts of the number so they can be displayed in different sections. The updated method will look like this:
methods: {
prettifyMyNumber(num) {
// perform calculations
return [numValue, floatValue];
}
}
To display each part separately, I could simply call the method twice within the template:
<template>
....
<div v-for="(value) in mydata">
<h2>{{ prettifyMyNumber(value)[0] }}</h2>
<h3>{{ prettifyMyNumber(value)[1] }}</h3>
</div>
...
</template>
However, this approach calls the method twice. Is there a way to store the result of the method somewhere and then use it to populate both h2 and h3 elements?