OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to define variable in vue template?

  • Thread starter Thread starter East2d
  • Start date Start date
E

East2d

Guest
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.

Code:
<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:

Code:
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?

<p><strong>Problem</strong></p>

<p>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.</p>

<pre><code><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>
</code></pre>

<p><strong>Javascript snippet:</strong></p>

<pre><code>getVehicleTypeData: function(vehicleType){
let options = _.find(this.vehicleTypeOptions, (obj)=>{
return obj.vehicleType==vehicleType;
});

return options;
}
</code></pre>

<p>To improve performance, I really need a variable to store the method call result.</p>

<p>What is the Vue way to solve this problem?</p>
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top