How to dynamically generate div in Vue?
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!
javascript html vue.js vuejs2
asked Nov 10 '18 at 10:40
Sanjay
642115
|
show 3 more comments
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!
javascript html vue.js vuejs2
asked Nov 10 '18 at 10:40
Sanjay
642115
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 '18 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 '18 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 '18 at 10:47
what ifdivs: 3?
– C2486
Nov 10 '18 at 10:49
@C2486 Then it will render three divs and only after thatdiv.contentshould render
– Sanjay
Nov 10 '18 at 10:52
|
show 3 more comments
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!
javascript html vue.js vuejs2
asked Nov 10 '18 at 10:40
Sanjay
642115
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!
javascript html vue.js vuejs2
javascript html vue.js vuejs2
asked Nov 10 '18 at 10:40
Sanjay
642115
asked Nov 10 '18 at 10:40
Sanjay
642115
edited Nov 10 '18 at 10:47
asked Nov 10 '18 at 10:40
Sanjay
642115
asked Nov 10 '18 at 10:40
Sanjay
642115
asked Nov 10 '18 at 10:40
Sanjay
642115
642115
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 '18 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 '18 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 '18 at 10:47
what ifdivs: 3?
– C2486
Nov 10 '18 at 10:49
@C2486 Then it will render three divs and only after thatdiv.contentshould render
– Sanjay
Nov 10 '18 at 10:52
|
show 3 more comments
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 '18 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 '18 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 '18 at 10:47
what ifdivs: 3?
– C2486
Nov 10 '18 at 10:49
@C2486 Then it will render three divs and only after thatdiv.contentshould render
– Sanjay
Nov 10 '18 at 10:52
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 '18 at 10:44
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 '18 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 '18 at 10:45
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 '18 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 '18 at 10:47
@C2486 There's a sample data there!
– Sanjay
Nov 10 '18 at 10:47
what if
divs: 3 ?– C2486
Nov 10 '18 at 10:49
what if
divs: 3 ?– C2486
Nov 10 '18 at 10:49
@C2486 Then it will render three divs and only after that
div.content should render– Sanjay
Nov 10 '18 at 10:52
@C2486 Then it will render three divs and only after that
div.content should render– Sanjay
Nov 10 '18 at 10:52
|
show 3 more comments
2 Answers
2
active
oldest
votes
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>answered Nov 10 '18 at 11:53
C2486
19k32665
1
That is a great answer.
– Marc Newton
Nov 10 '18 at 14:53
add a comment |
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
answered Nov 10 '18 at 15:12
TommyF
1,14211026
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238113%2fhow-to-dynamically-generate-div-in-vue%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 10 '18 at 11:53
C2486
19k32665
1
That is a great answer.
– Marc Newton
Nov 10 '18 at 14:53
add a comment |
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>answered Nov 10 '18 at 11:53
C2486
19k32665
1
That is a great answer.
– Marc Newton
Nov 10 '18 at 14:53
add a comment |
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>answered Nov 10 '18 at 11:53
C2486
19k32665
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>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>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>answered Nov 10 '18 at 11:53
C2486
19k32665
answered Nov 10 '18 at 11:53
C2486
19k32665
answered Nov 10 '18 at 11:53
C2486
19k32665
answered Nov 10 '18 at 11:53
C2486
19k32665
19k32665
1
That is a great answer.
– Marc Newton
Nov 10 '18 at 14:53
add a comment |
1
That is a great answer.
– Marc Newton
Nov 10 '18 at 14:53
1
1
That is a great answer.
– Marc Newton
Nov 10 '18 at 14:53
That is a great answer.
– Marc Newton
Nov 10 '18 at 14:53
add a comment |
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
answered Nov 10 '18 at 15:12
TommyF
1,14211026
add a comment |
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
answered Nov 10 '18 at 15:12
TommyF
1,14211026
add a comment |
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
answered Nov 10 '18 at 15:12
TommyF
1,14211026
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
answered Nov 10 '18 at 15:12
TommyF
1,14211026
answered Nov 10 '18 at 15:12
TommyF
1,14211026
answered Nov 10 '18 at 15:12
TommyF
1,14211026
answered Nov 10 '18 at 15:12
TommyF
1,14211026
1,14211026
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53238113%2fhow-to-dynamically-generate-div-in-vue%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 '18 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 '18 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 '18 at 10:47
what if
divs: 3?– C2486
Nov 10 '18 at 10:49
@C2486 Then it will render three divs and only after that
div.contentshould render– Sanjay
Nov 10 '18 at 10:52