javascript - 在 v-for 中动态创建一个 html 结构

Question

我目前面临 vue.js 的问题，我想在 v-for 循环中动态创建 html 标签。用例如下:

生成的 html 应如下所示:

<div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
</div>
<div class="wrapper">
    <div class="item">3</div>
    <div class="item">4</div>
</div>
...

我迭代的数组只包含项目元素:

[
    {
         name: 1
    },
    {
         name: 2
    },
    {
         name: 3
    },
    {
         name: 4
    }
]

标准的 v-for 循环看起来像这样:

<div class="item" v-for="item in items">{{ item.name }}</div>

但显然包装元素丢失了。我如何包括它们？我能想到的唯一解决方案是创建一个计算变量并将项目嵌套在那里，然后迭代嵌套版本。计算变量看起来像这样:

[
    {
         items: [
             {
                  name: 1
             },
             {
                  name: 2
             }
         ]
    },
    {
         items: [
             {
                  name: 3
             },
             {
                  name: 4
             }
         ]
    }
]

但我真的不想那样做，因为它很笨重而且不太好。完美的解决方案是在模板中以某种方式组织结构，例如我会用 php 来组织结构。 (在适当的时候打开和关闭wrapper div的html标签)。

Answer 1

这是一个基于您的示例的解决方案。希望您可以对其进行调整以满足您的需求。

看起来您正在将项目数组分成两个一组。我创建了一个 filter 来进行分块:

Vue.filter('chunk', function (value, size) {
  return _.chunk(value, size); // using lodash
})

然后我使用该过滤器创建了一个嵌套的 v-for 循环:

<div v-for="group in items | chunk 2" class="wrapper">
  <div v-for="item in group" class="item">
    {{ item.name }}
  </div>
</div>

外循环迭代“ block ”，内循环迭代 block 中的每个项目。

这是完整的 jsfiddle示例。