Problem
I have the need to temporarily store the results of a method call in Vue templates. This is particularly common inside loops, where I cannot easily use computed properties.
<ul>
<li v-for="vehicleType in vehicleTypes" :key="vehicleType">
<h3>{{ vehicleType }}</h3>
<div v-if="getVehicleTypeData(vehicleType)">
{{ getVehicleTypeData(vehicleType).costPerMile }}<br>
{{ getVehicleTypeData(vehicleType).costPerHour }}<br>
</div>
</li>
</ul>
Javascript snippet:
getVehicleTypeData: function(vehicleType){
let options = _.find(this.vehicleTypeOptions, (obj)=>{
return obj.vehicleType==vehicleType;
});
return options;
}
To improve performance, I really need a variable to store the method call result.
What is the Vue way to solve this problem?
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
A quick way to work around Vue's current shortcomings is to use scoping through v-for and a single loop. A hopefully explanatory example:
<v-list>
<v-list-tile v-for="(module, idx) in modules">
<template v-for="scope in [{ isLocked: someFunction(module)}]">
<!-- any markup -->
<v-list-tile-action v-if="scope.isLocked">
<v-icon color="amber">lock</v-icon>
</v-list-tile-action>
</template>
</v-list-tile>
</v-list>
The <template>
element above does the trick. You call your function (someFunction
) in a temporary size-1 array of objects, assign it to a property (isLocked
), which in turn is assigned to a scoped variable (scope
). You can now access whatever someFunction returns as many times as you like without sacrificing performance through scope.isLocked
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With