首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在v-for中动态创建html结构

在v-for中动态创建html结构
EN

Stack Overflow用户
提问于 2016-01-11 23:34:10
回答 1查看 1.3K关注 0票数 1

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

生成的html应该如下所示:

代码语言:javascript
复制
<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>
...

我正在迭代的数组只包含item元素:

代码语言:javascript
复制
[
    {
         name: 1
    },
    {
         name: 2
    },
    {
         name: 3
    },
    {
         name: 4
    }
]

标准的v-for循环如下所示:

代码语言:javascript
复制
<div class="item" v-for="item in items">{{ item.name }}</div>

但是很明显,包装器元素丢失了。如何包含它们?我能想到的唯一解决方案是创建一个计算变量,并在其中嵌套项,然后迭代嵌套的版本。计算出的变量如下所示:

代码语言:javascript
复制
[
    {
         items: [
             {
                  name: 1
             },
             {
                  name: 2
             }
         ]
    },
    {
         items: [
             {
                  name: 3
             },
             {
                  name: 4
             }
         ]
    }
]

但我真的不想这样做,因为它很笨重,而且不是很好。完美的解决方案是在模板中以某种方式组织结构,就像我用php做的那样。(在适当的时间打开和关闭包装器div的html标签)。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-12 00:51:11

这里有一个基于您的示例的解决方案。希望你能调整它来满足你的需求。

看起来你正在把你的数组分成两个一组。我创建了一个filter来执行该分块操作:

代码语言:javascript
复制
Vue.filter('chunk', function (value, size) {
  return _.chunk(value, size); // using lodash
})

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

代码语言:javascript
复制
<div v-for="group in items | chunk 2" class="wrapper">
  <div v-for="item in group" class="item">
    {{ item.name }}
  </div>
</div>

外部循环迭代“块”,内部循环迭代块中的每个项目。

下面是一个完整的jsfiddle示例。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34725308

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档