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

我有这样的父组件vue：

<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>

<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>

颜色
大小
...
从“../form/FormSelect.vue”导入FormSelect
导出默认值{
数据（）{
返回{
数量：[
{id:1，值：'1'}，
{id:2，值：'2'}，
{id:3，值：'3'}
],
尺寸：[
{id:1，值：'S'}，
{id:2，值：'M'}，
{id:3，值：'L'}
]
}
},
组件：{FormSelect}，
方法：{
添加（事件）{
const color=document.getElementById（'color'）。值，
size=document.getElementById（'size'）。值
}
}
}

我的子组件vue如下所示：

<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>

<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>

{{item.value}}
导出默认值{
道具：['id'，'name'，'data']，
数据（）{
返回{
已选择：“”
}
}
}

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

我想改变它。所以我想使用数据绑定vue组件。但我还是不知道怎么用它

---

如何使用数据绑定？您需要从子组件发出事件以发送数据，并使用on方法在父组件中获取数据：

家长：

<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
 }
 // ...
}

:

尽量少用$parent和$children，它们主要是作为逃生舱。喜欢使用道具和事件进行亲子沟通

---

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

家长：

<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
 }
 // ...
}

:

尽量少用$parent和$children，它们主要是作为逃生舱。喜欢使用道具和事件进行亲子沟通

---

当你开发新事物时，一切似乎都是正确的。以上答案完全正确，并感谢您及时提供的答案

发布此答案以更详细地描述答案。在Vue中开发应用程序时，您必须了解以下几点：

A.父组件和子组件之间的通信

B.非亲子沟通

A.父组件和子组件之间的通信 -让我们了解父组件和子组件之间的通信。我已经分解成几个步骤了，没有什么需要记住的

i） 将某些方法X与父方法绑定，以便该方法可以侦听子方法发出的消息

ii）在子组件中添加props属性以绑定子组件中的数据

iii）此.$发出与父组件中绑定的相同消息（X）

父组件

<template>
<form>
    <div class="row">
        <div class="col-md-4">
            <form-select id="color" name="color" (dropdownChanged)= 'colorChanged' :data="color">Color</form-select>
        </div>
        <div class="col-md-4">
            <form-select id="size" name="size" :data="size" (dropdownChanged)= 'sizeChanged'>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
            },
            colorChanged(color) {
               console.log('Color Changed', color);
            },
            sizeChanged(size) {
               console.log('size Changed', color);
            },
        }
    }
</script>

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select (change)='dropdownChanged' :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: ''
            }
        },
       methods: {
         dropdownChanged() {
           this.$emit('changesOccured',this.selected)
         }
       }
    }
</script>

---

参考-

当你开发新事物时，一切似乎都是正确的。以上答案完全正确，并感谢您及时提供的答案

发布此答案以更详细地描述答案。在Vue中开发应用程序时，您必须了解以下几点：

A.父组件和子组件之间的通信

B.非亲子沟通

A.父组件和子组件之间的通信 -让我们了解父组件和子组件之间的通信。我已经分解成几个步骤了，没有什么需要记住的

i） 将某些方法X与父方法绑定，以便该方法可以侦听子方法发出的消息

ii）在子组件中添加props属性以绑定子组件中的数据

iii）此.$发出与父组件中绑定的相同消息（X）

父组件

<template>
<form>
    <div class="row">
        <div class="col-md-4">
            <form-select id="color" name="color" (dropdownChanged)= 'colorChanged' :data="color">Color</form-select>
        </div>
        <div class="col-md-4">
            <form-select id="size" name="size" :data="size" (dropdownChanged)= 'sizeChanged'>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
            },
            colorChanged(color) {
               console.log('Color Changed', color);
            },
            sizeChanged(size) {
               console.log('size Changed', color);
            },
        }
    }
</script>

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select (change)='dropdownChanged' :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: ''
            }
        },
       methods: {
         dropdownChanged() {
           this.$emit('changesOccured',this.selected)
         }
       }
    }
</script>

---

参考-

是否有其他方法不使用

emit？

我在这里读到：

this.$parent.updateMehodeParent（param）

。它可以在子组件中用于更新父组件中的方法。在我的案例中可以使用这种方法吗？更新了我的答案。似乎不能使用

this.$parent.$options.methods.someParentMethod（data）

。因为在不使用

emit？

的情况下，它无法在更新父组件之前区分所选颜色和所选大小。我在这里读到：

this.$parent.updateMethodeparent（param）

。它可以在子组件中用于更新父组件中的方法。在我的案例中可以使用这种方法吗？更新了我的答案。似乎不能使用

this.$parent.$options.methods.someParentMethod（data）

。因为在更新父组件之前，它无法区分选定的颜色和选定的大小