如何使用 vue.js 在下拉列表中获得选定的值?
[英] How can I get selected value on the dropdown with vue.js?
本文介绍了如何使用 vue.js 在下拉列表中获得选定的值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有这样的父组件 vue :
<表格><div class="row"><div class="col-md-4"><form-select id="color" name="color" :data="color">颜色</form-select> <div class="col-md-4"><form-select id="size" name="size" :data="size">尺寸</form-select>
...<a href="javascript:" class="btn btn-danger" @click="add">添加</a></表单><脚本>从'../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').value,size = document.getElementById('size').value}}}
我有这样的子组件 vue :
<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></选择> <脚本>导出默认{道具: ['id', 'name', 'data'],数据(){返回 {选择:''}}}
如果我点击添加按钮，我成功选择了值.但它仍然使用 javascript (document.getElementById)
我想改变它.所以我想使用数据绑定 vue 组件.但我仍然很困惑使用它
如何使用数据绑定来实现?
解决方案
您需要从子组件发出事件以发送您的数据并使用 on 方法在父组件中获取该数据:
家长:
<form-select id="color" name="color" :data="color" v-on:triggerChange="changeColor">Color</form-select>方法: {//...更改颜色(选定){//做你想做的事情}//...}孩子:
方法: {//...应用颜色(){this.$emit('triggerChange',this.selected);}//...} <小时>
根据您的评论，您可以这样做:
this.$parent.$options.methods.someParentMethod(data)注意 :
<块引用>
谨慎使用 $parent 和 $children - 它们主要用作逃生舱.更喜欢使用道具和事件进行亲子交流.
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>
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>
If I click add button, I success get values selected. But it still using javascript (document.getElementById)
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?
解决方案
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:
Parent:
<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
}
// ...
}
Child:
<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)
Note :
Use $parent and $children sparingly - they mostly serve as an escape-hatch. Prefer using props and events for parent-child communication.
这篇关于如何使用 vue.js 在下拉列表中获得选定的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
