如何在vue.js的下拉列表中获取选定的值？

问题描述

我有这样的父组件vue：

I have parent component vue like this :

<template>
    <form>
        <div class="row">
            <div class="col-md-4">
                <form-select id="color" name="color" :data="color">Color</form-select>
            </div>
            <div class="col-md-4">
                <form-select id="size" name="size" :data="size">Size</form-select>
            </div>
        </div>
        ...
        <a href="javascript:" class="btn btn-danger" @click="add">
            Add
        </a>
    </form>
</template>

<script>
    import FormSelect from '../form/FormSelect.vue'
    export default {
        data(){
            return {
                quantity: [
                    {id: 1, value: '1'},
                    {id: 2, value: '2'},
                    {id: 3, value: '3'}
                ],
                size: [
                    {id: 1, value: 'S'},
                    {id: 2, value: 'M'},
                    {id: 3, value: 'L'}
                ]
            }
        },
        components: {FormSelect},
        methods: {
            add(event) {
                const color = document.getElementById('color').value,
                      size = document.getElementById('size').value
            }
        }
    }
</script>

我有这样的子组件vue：

I have child component vue like this :

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select :id="id" :name="name" class="form-control" v-model="selected">
            <option v-for="item in data">{{item.value}}</option>
        </select>
    </div>
</template>

<script>
    export default {
        props: ['id', 'name', 'data'],
        data(){
            return {
                selected: ''
            }
        }
    }
</script>

如果单击添加按钮，我会成功获取值。但它仍然使用javascript（document.getElementById）

If I click add button, I success get values selected. But it still using javascript (document.getElementById)

我想改变它。所以我想使用数据绑定vue组件。但是我仍然很难使用它

I want to change it. So I want to using data binding vue component. But i'm still confused to use it

我怎么能用数据绑定来做？

How can I do it with data binding?

推荐答案

您需要从子组件发出事件以发送数据并使用on方法在父组件中获取该数据：

You need to emit the event from child component to send your data and use the on method to get that data in the parent component:

父母：

<form-select id="color" name="color" :data="color" v-on:triggerChange="changeColor">Color</form-select>

methods: {
 // ...
 changeColor(selected) {
   // do what you want to do with selected
 }
 // ...
}

儿童：

<select :id="id" :name="name" class="form-control" v-model="selected" v-on:change="applyColor">

methods: {
 // ...
 applyColor() {
   this.$emit('triggerChange',this.selected);
 }
 // ...
}

---

根据你的评论，你可以这样做：

---

As per your comment, you can do like this:

this.$parent.$options.methods.someParentMethod(data)

：

这篇关于如何在vue.js的下拉列表中获取选定的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！