How to dynamically generate div in Vue?
up vote
1
down vote
favorite
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 at 10:40
Sanjay
629113
|
show 3 more comments
up vote
1
down vote
favorite
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 at 10:40
Sanjay
629113
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 at 10:47
what ifdivs: 3?
– C2486
Nov 10 at 10:49
@C2486 Then it will render three divs and only after thatdiv.contentshould render
– Sanjay
Nov 10 at 10:52
|
show 3 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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 at 10:40
Sanjay
629113
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 at 10:40
Sanjay
629113
asked Nov 10 at 10:40
Sanjay
629113
edited Nov 10 at 10:47
asked Nov 10 at 10:40
Sanjay
629113
asked Nov 10 at 10:40
Sanjay
629113
asked Nov 10 at 10:40
Sanjay
629113
629113
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 at 10:47
what ifdivs: 3?
– C2486
Nov 10 at 10:49
@C2486 Then it will render three divs and only after thatdiv.contentshould render
– Sanjay
Nov 10 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 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 at 10:47
what ifdivs: 3?
– C2486
Nov 10 at 10:49
@C2486 Then it will render three divs and only after thatdiv.contentshould render
– Sanjay
Nov 10 at 10:52
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 at 10:44
What exactly you are trying to do ? and why ? Can you share more details with multiple data ?
– C2486
Nov 10 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 at 10:45
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 at 10:47
@C2486 There's a sample data there!
– Sanjay
Nov 10 at 10:47
what if
divs: 3 ?– C2486
Nov 10 at 10:49
what if
divs: 3 ?– C2486
Nov 10 at 10:49
@C2486 Then it will render three divs and only after that
div.content should render– Sanjay
Nov 10 at 10:52
@C2486 Then it will render three divs and only after that
div.content should render– Sanjay
Nov 10 at 10:52
|
show 3 more comments
2 Answers
2
active
oldest
votes
up vote
1
down vote
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 at 11:53
C2486
18.7k32564
1
That is a great answer.
– Marc Newton
Nov 10 at 14:53
add a comment |
up vote
0
down vote
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 at 15:12
TommyF
1,1271826
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',
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
up vote
1
down vote
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 at 11:53
C2486
18.7k32564
1
That is a great answer.
– Marc Newton
Nov 10 at 14:53
add a comment |
up vote
1
down vote
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 at 11:53
C2486
18.7k32564
1
That is a great answer.
– Marc Newton
Nov 10 at 14:53
add a comment |
up vote
1
down vote
up vote
1
down vote
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 at 11:53
C2486
18.7k32564
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 at 11:53
C2486
18.7k32564
answered Nov 10 at 11:53
C2486
18.7k32564
answered Nov 10 at 11:53
C2486
18.7k32564
answered Nov 10 at 11:53
C2486
18.7k32564
18.7k32564
1
That is a great answer.
– Marc Newton
Nov 10 at 14:53
add a comment |
1
That is a great answer.
– Marc Newton
Nov 10 at 14:53
1
1
That is a great answer.
– Marc Newton
Nov 10 at 14:53
That is a great answer.
– Marc Newton
Nov 10 at 14:53
add a comment |
up vote
0
down vote
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 at 15:12
TommyF
1,1271826
add a comment |
up vote
0
down vote
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 at 15:12
TommyF
1,1271826
add a comment |
up vote
0
down vote
up vote
0
down vote
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 at 15:12
TommyF
1,1271826
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 at 15:12
TommyF
1,1271826
answered Nov 10 at 15:12
TommyF
1,1271826
answered Nov 10 at 15:12
TommyF
1,1271826
answered Nov 10 at 15:12
TommyF
1,1271826
1,1271826
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 at 10:44
@C2486 Well, my requirement is do to that way
– Sanjay
Nov 10 at 10:45
@C2486 There's a sample data there!
– Sanjay
Nov 10 at 10:47
what if
divs: 3?– C2486
Nov 10 at 10:49
@C2486 Then it will render three divs and only after that
div.contentshould render– Sanjay
Nov 10 at 10:52