Add dynamic dropdown on button click and getting the dropdown values

Question

I have added html select options dynamically while clicking on button

<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 am using component for adding html select dynamically.when i click on Add row button, new drop down will add. My problem is i want to get drop down values on Show values button click.

Pratik Patel · Accepted Answer · 2019-03-28 16:19:25Z

1

For accessing value what you can do is add ref to all components and get the value of the v-model using the $ref but for that, you need to add the v-model to the select component. I have created the plunker with your code and its working fine. For more detail please refer the codepen.

codepen - https://codepen.io/anon/pen/Qoeybv

answered Mar 28, 2019 at 16:19

Pratik Patel

7,0381 gold badge20 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Ganchev · Accepted Answer · 2019-03-28 17:58:14Z

0

I see that you have one "Show values button click", but can exist many select HTML elements. Have to decide which element you want to get. If you want to get all it can be done in this.$children as array of objects. See this [enter link description here][1]. I'm new at vue.js and I do not claim to be a good practice / solution. There is added event on each select (for example) and show last select element in showValues().

[1]: https://codepen.io/iganchev87/pen/xBvOMJ

answered Mar 28, 2019 at 17:58

Ivan Ganchev

1742 silver badges11 bronze badges

Collectives™ on Stack Overflow

Add dynamic dropdown on button click and getting the dropdown values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related