When I click the button, I am dynamically adding HTML select options.
<div id="app">
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
<button @click="showValues">
Show values
</button>
</div>
<div v-for="row in rows" :id=row.id>
<button-counter></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
props: ['value'],
template: '<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>'
})
var app = new Vue({
el: "#app",
data: {
rows: [],
values: {},
count: 0,
selected: ''
},
methods: {
addRow: function () {
var txtCount = ++this.count;
id = 'ddl_' + txtCount;
this.rows.push({ title: "first", description: "ddl1", id });
},
showValues() {
console.log(this.values)
}
}
});
</script>
I have implemented a component to generate HTML select elements dynamically. Each time the 'Add row' button is clicked, a new dropdown is added. I am currently facing an issue where I need to retrieve the values of these dropdowns when the 'Show values' button is clicked.