如何在vue模板中定义变量？

Question

问题

我有需要将方法调用的结果临时存储在 Vue 模板中。这在内部循环中特别常见，我无法在其中轻松使用计算属性。

 <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 片段：

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

    return options;
}

为了提高性能，我确实需要一个变量来存储方法调用结果。

Vue 解决这个问题的方法是什么？

原文由 xyingsoft 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决 Vue 当前缺点的一种快速方法是通过 v-for 和单个循环使用范围界定。一个有希望解释的例子：

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

上面的 <template> 元素可以解决问题。您在临时大小为 1 的对象数组中调用您的函数 ( someFunction )，将其分配给一个属性 ( isLocked )，该属性又被分配给一个作用域变量 ( scope ）。现在，您可以通过 scope.isLocked 访问任意多次 someFunction 返回的内容，而不会牺牲性能。

原文由 untill 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以只创建一个计算属性，将类型 obj 合并到 vehiclesTypes 数组中。

 computed: {

  vehicles() {
    return this.vehicleTypes.map(vehicle => {
       return {
         value: vehicle,
         type: { ...this.getVehicleTypeData(vehicle) }
       }
    })
  }

},

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

    return options;
  }
}

你可以这样做：

 <ul>
  <li v-for="vehicle of vehicles" :key="vehicle.value">
    <h3>{{ vehicle.value }}</h3>
    <div v-if="vehicle.type">
     {{ vehicle.type.costPerMile }}<br>
     {{ vehicle.type.costPerHour }}<br>
    </div>
  </li>
</ul>

如果您遵循逻辑，我相信它会起作用。虽然我不知道 vehiclesTypes 的值，所以上面的代码可能需要一些更改。

我希望它可以帮助你。

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议