我在单击按钮时动态添加了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的组件。当我单击“添加行”按钮时,将添加新的下拉列表。我的问题是我想在“显示值”按钮单击时获得下拉值。
答案 0 :(得分:1)
要获取值,您可以做的是向所有组件添加引用,并使用v-model
获得$ref
的值,但为此,您需要将v-model
添加到选择组件。我已经用您的代码及其正常工作创建了插件。有关更多详细信息,请参阅代码笔。
答案 1 :(得分:0)
我看到您有一个“单击显示值按钮”,但是可以存在许多选择HTML元素。必须决定要获取哪个元素。如果要获得所有这些,可以在this。$ children中将其作为对象数组来完成。请参阅此[在此处输入链接说明] [1]。我是vue.js的新手,我并不声称这是一种好的做法/解决方案。在每个select上添加一个事件(例如),并在showValues()中显示最后一个select元素。
[1]: https://codepen.io/iganchev87/pen/xBvOMJ