Question

93

How to define variable in vue template?

rated 0 times [ 94] [ 1] / answers: 1 / hits: 24324 / 5 Years ago, wed, january 30, 2019, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

adam

Add To Favorites

Follow

Total Points: 363

Total Questions: 102

Total Answers: 104

Location: Burkina Faso

Member since Thu, Dec 15, 2022

1 Year ago

answered 5 Years ago frederickmohamedw · Accepted Answer

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.