小编Rak*_*ski的帖子

我对这个模糊的标题感到抱歉，因为我很困惑关于这个问题我应该在标题中写什么，

所以，我想使用vuetify网格进行组件布局。如果我想正常实现它，我确切地知道如何实现，如下所示：

<template>
 <v-flex v-if="totalMenuShowed=== 4" xs12 md6 xl6>
  <div>
   // some component
  </div>
 </v-flex>

 <v-flex v-else-if="totalMenuShowed=== 3" xs12 md6 xl4>
  <div>
   // some component
  </div>
 </v-flex>

 <v-flex v-else xs12 md12 xl12>
  <div>
   // some component
  </div>
 </v-flex>
</template>

<script>
  props: {
    totalMenuShowed: {
      type: Number,
      default: 4,
    },
  },
</script>

但我想知道的是

“我可以根据我拥有的值或道具给出一个条件，而不使用并根据我获得的值v-if直接修改xs12, md6, xl4”

例如如下所示，因为对于内部组件，class我可以根据需要更改它@media screen，但我无法更改网格，因为我将它用于下面的另一个组件，并且我不喜欢自己更改网格值：

<template>
 <v-flex {totalMenuShowed === 4 ? xs12 md6 xl6 : totalMenuShowed=== 3 …

我知道对此有很多问题，但很难找到可以实现它的答案。我想制作一个求和价格的函数，但每次我尝试使用循环时它总是给我length property undefined

我尝试了一些主题，但仍然失败了：

数组内对象属性之和

如何在 javascript 中获取嵌套数组长度

如何使用javascript从数组中获取总和

无法读取未定义角度 7 的属性长度

这是我的ts：

  allUnpaidTeam: []; //this is a variabel to store all my Json in my array

  formatPrice(value) {
    let val = (value/1)
    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
  }

  totalPrice() {
    let total = 0;
    for(let data of this.allUnpaidTeam){
      for(let datas of data.contest){
        let sum = datas.pricePerStudent * data.memberPerTeam;
        total+= sum;
      }
    }
    return this.formatPrice(total);
  }

这是 json 数组的示例：

{
  "teams": [
    {
      "student": [
        {
          "team": null,
          "_id": "5d4e891cff5e00c9d5c28af9",
          "name": …