在按钮单击时添加动态下拉列表并获取下拉值答案

【问题标题】：Add dynamic dropdown on button click and getting the dropdown values在按钮单击时添加动态下拉列表并获取下拉值
【发布时间】：2019-03-27 05:50:12
【问题描述】：

我在点击按钮时动态添加了 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 选择。当我单击添加行按钮时，将添加新的下拉菜单。我的问题是我想在单击显示值按钮时获取下拉值。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

要访问值，您可以将 ref 添加到所有组件并使用 $ref 获取 v-model 的值，但为此，您需要将 v-model 添加到选择组件。我已经用你的代码创建了 plunker，它工作正常。有关更多详细信息，请参阅 codepen。

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

【讨论】：

【解决方案2】：

我看到您有一个“显示值按钮单击”，但可以存在许多选择的 HTML 元素。必须决定要获得哪个元素。如果你想得到所有它可以在 this.$children 作为对象数组中完成。请参阅此 [在此处输入链接描述][1]。我是 vue.js 的新手，我并不声称自己是一个好的实践/解决方案。每个选择（例如）都有添加事件，并在 showValues() 中显示最后一个选择元素。

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

【讨论】：