VueJS和SVG-基于元素类型的数组和条件渲染上的嵌套迭代

我有一个对象数组，作为道具传递给SVG组件。该数组填充了不同的形状（例如圆形和矩形）。我想渲染svg中的所有元素，但我不知道如何构造外部循环。（我在这里的假设是，只有嵌套循环才可能实现）

SVG：在对象注释中，我希望有一个我将迭代的外部循环，并且基于“type”键值，我可以有条件地呈现我需要的任何东西，基于它是圆形还是矩形。等等

    <!-- <object v-for="item in elements> -->

  <circle v-if="item.type='circles'" v-for="item in elements[0].items"
    :cx="item.x"
    :cy="item.y"
    :r="5"/>

<!-- </object> -->

我不知道如何使外部循环遍历数组

---

沙盒：

是的，您需要嵌套循环，因为您有一个元素数组，每个元素中都有一个项目数组。因此，您的模板应该如下所示：

<template>
  <div>
    <svg id="svg1" style="background: #808080">

      <template v-for="elem in elements">

        <template v-if="elem.type == 'circle'">
          <circle v-for="item in elem.items" :cx="item.x" :cy="item.y" r="5" />
        </template>

        <template v-if="elem.type == 'rectangles'">
          <rect
            v-for="item in elem.items"
            :x="item.x - 5"
            :y="item.y - 5"
            width="10"
            height="10"
          />
        </template>

      </template>

    </svg>
  </div>
</template>

更新

---

顺便说一句：您的代码在

v-if=“item.type='circles'

中包含两个隐藏的bug。您不需要与“circles”进行比较，而是将值指定为“circles”。您应该与“circle”（而不是“circles”）进行比较.

谢谢。我从来没有意识到标签及其在这些情况下的用处。如果我需要迭代，我通常使用这种情况下无法使用的标签。干杯！

<template>
  <div>
    <svg id="svg1" style="background: #808080">

      <template v-for="elem in elements">

        <template v-if="elem.type == 'circle'">
          <circle v-for="item in elem.items" :cx="item.x" :cy="item.y" r="5" />
        </template>

        <template v-if="elem.type == 'rectangles'">
          <rect
            v-for="item in elem.items"
            :x="item.x - 5"
            :y="item.y - 5"
            width="10"
            height="10"
          />
        </template>

      </template>

    </svg>
  </div>
</template>

<template v-for="elem in elements">

<template v-if="elem.type == 'circle'">

<circle v-for="item in elem.items" :cx="item.x" :cy="item.y" r="5" />

<svg data-v-763db97b="" id="svg1" style="background: rgb(128, 128, 128);">
    <circle data-v-763db97b="" cx="12" cy="13" r="5"></circle>
    <circle data-v-763db97b="" cx="30" cy="40" r="5"></circle>
    <rect data-v-763db97b="" x="17" y="28" width="10" height="10"></rect>
    <rect data-v-763db97b="" x="35" y="45" width="10" height="10"></rect>
</svg>