vue element ui select值传到input
时间: 2023-09-05 22:07:47 浏览: 107
可以通过监听`<el-select>`的`change`事件,将选中的值赋值给一个data中的变量,然后将这个变量的值绑定到`<el-input>`中。具体实现可以参考下面的代码示例:
```html
<template>
<div>
<el-select v-model="selectedValue" @change="handleChange" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-input v-model="selectedValueStr" placeholder="选中的值"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项一' },
{ value: 'option2', label: '选项二' },
{ value: 'option3', label: '选项三' }
],
selectedValue: '',
selectedValueStr: ''
}
},
methods: {
handleChange() {
this.selectedValueStr = this.selectedValue
}
}
}
</script>
```
在上面的代码中,我们定义了一个`<el-select>`和一个`<el-input>`。在`<el-select>`中,我们通过`v-model`指令绑定了选中值的变量`selectedValue`,同时通过`@change`事件监听选中值的变化,并执行`handleChange`方法。在`handleChange`方法中,我们将选中的值赋值给另一个变量`selectedValueStr`,并将其绑定到`<el-input>`中,从而实现将选中值传递给`<el-input>`的效果。
阅读全文