I'm in a situation where I need to run v-for without a wrapping element.
Let's have an example. I have two array namely subjects and terms. If I wish to iterate terms subjects.length times, I need to do something like this
<body>
<div v-for="s in subjects">
<p v-for="t in terms">{{t}}<p>
<div>
<body>
Which will generate subjects.length number of divs and subjects.length * terms.length number of ps. But for my actual application I need just subjects.length * terms.length number of p and no wrapping div.
Is it achievable?
make a computed property with array length of subjects.length * terms.length ?
let iterator = []
for (let i = 0; iterator.length <= this.subjects.length * this.terms.length; i++) {
iterator.push(i)
}
return iterator
how about that? Can you not transform your terms array to different structure? You can do that in computed.
EDIT
Saw this on docs: https://vuejs.org/v2/guide/list.html#Range-v-for
That's what you need.
You can use <template v-for="item in items"></template> which will only render the contents in your HTML and not a wrapping element.
@sutherland thanks bro. This is what I needed.
Please or to participate in this conversation.