Question

我有一系列对象，它们作为道具传递给我的SVG组件。该数组充满了不同的形状（例如圆形和矩形）。我想渲染svg中的所有元素，但我不知道如何构造外循环。（我的假设是只能使用嵌套循环）

elements:[
  {
    type:"circle",
    items:[
        {
          x:12,
          y:13
        },
        {
          x:30,
          y:40
        }
      ]
    },

  {
    type:"rectangles",
    items:[
        {
          x:22,
          y:33
        },
        {
          x:40,
          y:50
        }
      ]
    }

  ]

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> -->

我不知道如何制作将遍历数组的外循环

沙箱：https://codesandbox.io/s/oqqnwm8vpy

Answer 1

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

<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" />

请注意，我正在使用template标签，以避免外部循环和 if 条件生成它们自己的标签。这样，我们就不会在svg元素内获得任何其他嵌套：

<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>

更新

顺便说一句：您的代码在v-if="item.type='circles'中包含两个隐藏的错误。您可以将值“ circles”分配给而不是与“ circles”进行比较。而且您应该将其与“圆圈”（而不是“圆圈”）进行比较。

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

1 个答案: