Odtnhj

I have the following code:

<div class="content">
 <p>Hello World</p>
</div>

And I have the following div count:

data() 
 return 
 divs: 2
 

So, if divs is 2 then it should generate two divs and wrap the div.content inside it so it becomes something like this:

<div>
 <div>
 <div class="content">
 <p>Hello World</p>
 </div>
 </div>
</div>

As you can see there's two divs and then only there's this div.content! I tried using v-for but it generates 2 separate divs! Please help!

Here is the example to make multiple Div provided in vue data. with vue components.

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('my-div', 
 props:['mydata','divs'],
 template: '<div class="test"><div v-if="divs==1" class="text-center">mydata</div><div v-if="divs>1"><my-div :mydata="mydata" :divs="divs-1"></my-div></div></div>'
)

var v = new Vue(
el: '#app',
data:
 name:'Niklesh Raut',
 divs:4

);

#app div.test
 border: 2px solid blue;
 padding:5px;

.text-center
 text-align:center;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <my-div :mydata="name" :divs="divs"></my-div>
</div>

First off: this sounds like a pretty unnecessary requirement and most probably re-framing the problem will lead to a much better solution!

That being said, there is a way to achieve what you're trying to do with some dark Vue magic ;-)

What you need is a recursive render function:

render: function (createElement) 
return this.level >= 1 ? 
 createElement('div', [createElement(DynamicDiv, 
 props: 
 level: this.level-1
 
 , this.$slots.default)]) : 
 createElement('div', this.$slots.default)
,
props: 
 level: 
 type: Number,
 required: true
 

https://vuejs.org/v2/guide/render-function.html

You can find a working example over here: https://codesandbox.io/s/k9p16wzmyo