带有 v-if 或计算属性的 V-for

如何解决带有 v-if 或计算属性的 V-for

我一直在理解计算属性方面遇到问题，但我认为这就是我的问题所需要的。基本上，我有一个表格，其中包含我从 API 响应填充的列。其中一列是 Monthly，我需要检查当前月份和年份，然后写下该月的剩余使用量。如果我没有月或年的数据，或者数组为空，我应该打破循环，并显示 main_usage。

我正在考虑使用计算属性，但我不确定如何..

下面有示例代码和json

<!-- First v-for for looping through all permissions data -->    

 <tr v-for="t in permissions" :key="t.id">    

<!-- If we have data in .permission_usage show it -->    

<template v-if="t.permission_usage.length">    

<!-- Loop through permission_usage -->      

<template v-for="p in t.permission_usage" :key="p.id">
<!--Check dates,works fine -->      

 <template v-if="currentYear()===p.year && currentMonth()===p.month">    

<!-- Shows data as it should -->      

 <td>{{p.used}}</td>      
</template>

<!-- Here comes my issue -->      

 <template v-else>    

<!-- I don't want to loop through data anymore,because I would have main_usage for every permission_usage because i'm in loop,here I would like to break loop-->      

 <td>{{t.main_usage}}</td>      
</template>

 </template>      
</template>

<!-- If we don't have data in .permission_usage show main_usage -->      

 <template v-else>      
<td>{{t.main_usage}}</td> </template>

</tr>  

//响应存储在权限数组中

//currentMonth() 和 currentYear() 返回当前月份和当前年份的值

JSON

[
{
"main_usage": 5000,"permission_usage": [
{
"year": 2021,"month": 6,"used": 66,},{
"year": 2021,"month": 7,"used": 220,....
]
},...
]

这是小提琴 https://jsfiddle.net/2bk4ga5y/57/ ，但我的输出应该是：

220

77

33

1500。

提前致谢！

解决方法

未测试但类似这样的东西？ 如果您使用的是 Vue 2：

computed: {
    permissions: () => this.$store.getters.whateverAPIsetupYouhavethere
}

在 vue 3 中：

import { ref } from 'vue' 
setup(){
    const permissions = ref(this.$store.getters.whateverAPIsetupYouhavethere)
    return { permsissions }
}

,

所以我开始明白我不能直接在 UI 中改变东西，我需要在数据呈现在页面上之前处理数据，当我意识到这一点时，这真的很容易。因此，在该方法中，我创建了一个名为 showRenderedData 的新属性，其值为字符串“None”并将其绑定到我的模板，因此它始终显示“None”。 然后，我首先对权限进行 forEach 循环，然后将我的新属性 showRenderData 覆盖到 main_usage。在那个循环之后，我创建了另一个 forEach for 循环，通过 permission_usage，在那里设置条件来检查月份和长度，并且只有在满足条件的情况下，我才会使用 row_export_usage 覆盖满足条件的属性。 稍后我将使用此方法编辑小提琴，以便有人可以看到它的实际效果。