问题
我需要在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解决此问题的方法是什么?
答案 0 :(得分:3)
您只需创建一个计算属性即可将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的值,所以上面的代码可能需要进行一些更改。
希望它能对您有所帮助。
答案 1 :(得分:2)
一个选项是定义一个组件。您可以将需要“存储”的值作为道具传递给它,并且它可以多种方式使用它。这是一种更为Vue式的方法。
另一个选择是将函数调用包装在数组中,并使用v-for
为它创建一个别名。这更多的是hacky / lazy优化,但它并不脆弱,只是有些奇怪。
new Vue({
el: '#app',
data: {
vehicleTypes: [0, 1]
},
methods: {
getVehicleTypeData(type) {
return [{
costPerMile: 10,
costPerHour: 40
}][type];
}
}
});
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<ul id="app" new>
<li v-for="vehicleType in vehicleTypes" :key="vehicleType">
<h3>{{ vehicleType }}</h3>
<template v-for="data in [getVehicleTypeData(vehicleType)]">
<div v-if="data">
{{ data.costPerMile }}<br> {{ data.costPerHour }}<br>
</div>
</template>
</li>
</ul>
答案 2 :(得分:1)
不幸的是,在当前版本中是不可能的:(
在您的示例中,您可以使用计算出的值进行计算并使用它。
<ul>
<li v-for="vehicleType, idx in vehicleTypes" :key="vehicleType">
<h3>{{ vehicleType }}</h3>
<div v-if="vtData[idx]">
{{ vtData[idx].costPerMile }}<br>
{{ vtData[idx].costPerHour }}<br>
</div>
</li>
</ul>
...
computed: {
vtData() {
return this.vehicleTypes.map(vt => this.getVehicleTypeData(vt));
}
}
答案 3 :(得分:1)
我从一些研究中找到了解决方案,我自己发表了答案,但不确定是否还有其他最佳解决方案。
JavaScript代码段:
const Pass = {
render() {
return this.$scopedSlots.default(this.$attrs)
}
}
export default {
components: {
Pass
},
data: function () {
return {
vehicleTypeOptions: [],
}
},
methods: {
getVehicleData: function(vehicleType){
let option = _.find(this.vehicleTypeOptions, (obj)=>{
return obj.vehicleType==vehicleType;
});
return option;
},
loadData: function(){
// get data from server using API and set to vehicleTypeOptions
}
},
mounted: function(){
this.loadData();
}
}
模板片段:
<Pass v-for="vehicleType in VehicleTypes" v-bind:key="vehicleType" :temp="getVehicleData(vehicleType)">
<div slot-scope="{temp}">
<div class="pannel">
<h6>{{ vehicleType }}</h6>
<p v-if="temp">
Cost per mile: <strong>${{ temp.costPerMile }}</strong>,
Cost per hour: <strong>${{ temp.costPerHour }}</strong>,
Cost per day: <strong>${{ temp.costPerDay }}</strong>
</p>
</div>
</div>
</Pass>
答案 4 :(得分:0)
解决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>
元素可以解决问题。您在对象的临时size-1数组中调用函数(someFunction
),将其分配给属性(isLocked
),该属性又被分配给作用域变量(scope
) 。现在,您可以根据需要多次访问someFunction返回的内容,而无需通过scope.isLocked
来降低性能。