V-for 与 v-if 或计算属性

Question

我一直无法理解计算属性，但我认为这就是我的 issue.Basically 所需要的，我有一个 table，其中的列是我从 API 填充的回复。其中一列是每月，我需要检查当前的月份和年份，然后写下该月的剩余使用情况。如果我没有月份或年份的数据，或者数组为空，我应该打破这个循环，并显示 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() return当前月份和当前年份的值

JSON

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

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

220

77

33

1500.

提前致谢！

Answer 1

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

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

在 Vue 3 中：

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

Answer 2

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

V-for 与 v-if 或计算属性

V-for with v-if or computed property

javascript

vue.js

v-for

vuejs3

V-for 与 v-if 或计算 属性

V-for with v-if or computed property

javascript

vue.js

v-for

vuejs3

V-for 与 v-if 或计算属性