计算 v-for 中 v-if 输出的总数

Question

我有这样的代码

<template>
  <div v-for="(item, i) in items" :key="i">
    <div v-for="(subitem, index) in subitems" :key="index" v- 
       if="item.id==subitem.item_id">
    {{count(subitem)}}
    </div>
  </div>
</template>
<script>
data() {
  return {
    items: [],
    subitems: [],
  }
}

watch: {

  items : async function() {
  const itm = await('get','/item')
  this.items = itm
    },

  subitems : async function() {
  const subitm = await('get','/sub_items')
  this.subitems = subitm

    },
},
</script>

项目和子项目数组从手表属性中的 api 提取中获取数组的值。每个子项值中都有项目 ID，如果子项的输出等于项目 ID，现在我想要每个 v 的计数或长度。怎么做？

谢谢

Answer 1

你不能把 v-for 和 v-if 放在同一个元素上，你能提供更多关于你的数组结构的信息吗？这样我就可以给你最好的方法，但是你可以根据我所拥有的创建获取项目和子项目后执行此功能

items.foreach((element)=>{
element.subitemCount=0;
subitem.foreach(item=>{
if(element.id==item.item_id){
element.subitemCount++;}}

对于你的 vuejs，你可以这样写

<div v-for="(item, i) in items" :key="i">  {{item.subitemCount}} </div>

计算 v-for 中 v-if 输出的总数

Count total of v-if output in v-for

vue.js

vuejs2