After some trial and error, I was able to successfully create dynamic elements. The main goal of this exercise is to generate dynamic divs based on a specified "count", with the ability to add multiple textboxes inside each div.
If you're curious to see what I've accomplished so far, feel free to check it out here.
One thing to note is that upon the first click, the outcome may not match expectations. However, after clicking for the second time, everything falls into place as intended.
As a newcomer to vue, I suspect there might be something crucial that I'm overlooking. Any insight or guidance would be greatly appreciated.
Here's a snippet of the code I've been working on:
<div id="app">
<button @click="populate">Populate</button>
<div v-for="(input, index) in inputs" >
Id
<div v-for="(item, i) in input.items">
<input type="text" v-model="item.name">
</div>
<button v-show="index > 0" @click=input_add(index)>Add</button>
</div>
{{inputs}}
</div>
const app = new Vue({
el: '#app',
data: {
inputs: [],
counter: 0,
count: 3
},
methods: {
populate(){
var x = 1
while(x <= this.count){
this.inputs.push(
{
id: this.counter + 1,
items: []
}
)
this.input_add(x)
this.counter++
x++
}
},
input_add(x){
this.inputs[x].items.push(
{
name: null
}
)
}
}
})