Nrthugu

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