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

时间:2019-03-27 05:50:13

标签: javascript vue.js vuejs2 vue-component

我在单击按钮时动态添加了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的组件。当我单击“添加行”按钮时,将添加新的下拉列表。我的问题是我想在“显示值”按钮单击时获得下拉值。

2 个答案:

答案 0 :(得分:1)

要获取值,您可以做的是向所有组件添加引用,并使用v-model获得$ref的值,但为此,您需要将v-model添加到选择组件。我已经用您的代码及其正常工作创建了插件。有关更多详细信息,请参阅代码笔。

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

答案 1 :(得分:0)

我看到您有一个“单击显示值按钮”,但是可以存在许多选择HTML元素。必须决定要获取哪个元素。如果要获得所有这些,可以在this。$ children中将其作为对象数组来完成。请参阅此[在此处输入链接说明] [1]。我是vue.js的新手,我并不声称这是一种好的做法/解决方案。在每个select上添加一个事件(例如),并在showValues()中显示最后一个select元素。

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