javascript - 在按钮单击时添加动态下拉菜单并获取下拉值

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

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