Блог

Я добавил параметры выбора 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 select.когда я нажимаю на кнопку Добавить строку, будет добавлен новый выпадающий список. Моя проблема в том, что я хочу получить выпадающие значения при нажатии кнопки «Показать значения».

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

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

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

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