Добавить динамический раскрывающийся список при нажатии кнопки и получить значения раскрывающегося списка

Question

Я добавил параметры выбора HTML динамически при нажатии на кнопку

<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>

Я использую компонент для динамического добавления html-выбора. Когда я нажимаю кнопку Добавить строку, добавляется новый выпадающий список. Моя проблема в том, что я хочу получить выпадающие значения при нажатии кнопки Показать значения.

Answer 1

Для доступа к значению вы можете добавить ref для всех компонентов и получить значение v-model, используя $ref, но для этого вам нужно добавить v-model к компоненту select. Я создал поршень с вашим кодом и он работает нормально. Для более подробной информации, пожалуйста, обратитесь к авторучке.

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

Answer 2

Я вижу, что у вас есть один "Показать значения нажатием кнопки", но может существовать много выбранных элементов HTML.Нужно решить, какой элемент вы хотите получить.Если вы хотите получить все, это можно сделать в этом. $ Children в виде массива объектов.Смотрите это [введите описание ссылки здесь] [1].Я новичок в vue.js и не претендую на то, чтобы быть хорошей практикой / решением.К каждому выбору (например) добавляется событие и показывается последний элемент выбора в showValues ​​().

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