Javascript 使用v-if Vue在v-for中添加一些逻辑

我有一些json，结果如下

{
  "module": [
    {
      "id": 1,
      "title": "Module 1",
      "type": "URL",
      "size": 1,
      "image": "https://localhost/image1.png"
    },
    {
      "id": 2,
      "title": "Module 2",
      "type": "YOUTUBE",
      "size": 2,
      "image": "https://localhost/image2.png"
    }
  ]
}

现在我想在一个带有循环和条件的页面上呈现它，如下所示

<template>
  <section class="page-section homescreen mt-4">
    <div class="container">
        <div class="row">
          <div class="col-lg-3" v-bind:key="data.index" v-for="data in modules" v-if="data.size == 1">
              <img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
          </div>
          <div class="col-lg-6" v-bind:key="data.index" v-for="data in modules" v-if="data.size == 2">
              <img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
          </div>
        </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      modules: [
        {
          "id": 1,
          "title": "Module 1",
          "type": "URL",
          "size": 1,
          "image": "https://localhost/image1.png"
        },
        {
          "id": 2,
          "title": "Module 2",
          "type": "YOUTUBE",
          "size": 2,
          "image": "https://localhost/image2.png"
        }
      ]
    };
  }
};
</script>

但我没有成功，而是说了一些错误的话

5:99错误“v-for”指令内的“modules”变量应为 替换为返回筛选数组的计算属性。 您不应将“v-for”与“v-if”vue/no-use-v-if-with-v-for混合使用 8:99错误“v-for”指令内的“modules”变量应为 替换为返回筛选数组的计算属性。 您不应将“v-for”与“v-if”vue/no-use-v-if-with-v-for混合使用

实际上，我想创建一个基于json的动态部件，如果size:1表示有col-lg-3，如果size:2表示有col-lg-6

如有任何解释和建议，将不胜感激。 谢谢

如果模块为空，则v-if基本上是烘焙到v-for模块中的，不会呈现任何内容，因此建议不要将它们组合使用。如果你需要它作为一个单独的条件，就像你在这里做的那样，那么你必须将你的v-for移动到它本身

您也将无法以这种方式使用data.size，因此必须使用类似于v-if=modules[0].size==1等的内容

编辑

@华丽的回答可能是解决这个问题更有效的方法

编辑2

@r0ulito和@xianshenglu也提出了一个很好的观点，如果这只是一个类问题，请使用v-bind。

v-if基本上是嵌入到v-for-if模块中的，如果模块为空，则不会呈现任何内容，因此建议不要将它们组合使用。如果你需要它作为一个单独的条件，就像你在这里做的那样，那么你必须将你的v-for移动到它本身

您也将无法以这种方式使用data.size，因此必须使用类似于v-if=modules[0].size==1等的内容

编辑

@华丽的回答可能是解决这个问题更有效的方法

编辑2

@r0ulito和@xianshenglu也提出了一个很好的观点，如果这只是一个类问题，请使用v-bind。

如果您只有两种尺寸： 您可以使用来实现此要求

首先，创建两个新的计算属性，如：

computed: {
  modulesSize1: function() {
    return this.modules.filter(x => x.size == 1)
  },
  modulesSize2: function() {
    return this.modules.filter(x => x.size == 2)
  }
}

现在，您可以轻松地循环计算属性modulesSize1和&modulesSize2，如：

然后，我们可以更新模板并使用以下内容：

如果您只有两种尺寸： 您可以使用来实现此要求

首先，创建两个新的计算属性，如：

computed: {
  modulesSize1: function() {
    return this.modules.filter(x => x.size == 1)
  },
  modulesSize2: function() {
    return this.modules.filter(x => x.size == 2)
  }
}

现在，您可以轻松地循环计算属性modulesSize1和&modulesSize2，如：

然后，我们可以更新模板并使用以下内容：

---

如果它本质上是css类的东西，为什么不在条件中使用v-bind:class或：class呢

但正如错误消息中所说，您肯定必须创建一个子组件，然后在其上使用道具

---

如果它本质上是css类的东西，为什么不在条件中使用v-bind:class或：class呢

但正如错误消息中所说，您肯定必须创建一个子组件，然后在其上使用道具

我告诉你要这样做：

在您的情况下，它可以简化为

我告诉你要这样做：

在您的情况下，它可以简化为

---

它不在图像中，而是在div中，但无论如何我都会尝试。。更新：不可能，你能帮我一些片段吗？我更新了我的答案，因为我错过了你将无法使用数据的消息。按此方式调整大小如果你可以包含来自axios请求的数据，我将制作一个片段，它不在图像中，而是在div中，但我无论如何都会尝试。。更新：不可能，你能帮我一些片段吗？我更新了我的答案，因为我错过了你将无法使用数据的信息。按这种方式调整大小如果你可以包含来自axios请求的数据，我将制作一个片段，它不是真正可伸缩的，想象一下，如果在不久的将来，他将拥有20张不同大小的图片？他会把那个片段复制二十次吗？在我看来，这不是真正的可伸缩性，想象一下，在不久的将来，他会有二十张不同大小的图片吗？他会把那个片段复制二十次吗？那是可伸缩的！好工作伙伴；这是可伸缩的！好工作伙伴；

methods: {
  getClass: function(size) {
    return `col-lg-${size * 3}`
  },
}

<div :class="getClass(data.size)" :key="data.index" v-for="data in modules">
  <img class="img-fluid" :src="`${data.image}`" :alt="`${data.title}`" />
</div>