如何解决VueJs + ElementUi Change方法没有事件数据
Vue＆Element UI的新功能。 我正在尝试使用ElementUI自动完成/选择组件制作自定义组件。
我的问题是@change方法没有event.target.value值。
我得到一个
错误。
以下是我的Vue组件代码。
我从另一个组件中将其称为<account-search v-model="newAccountForm.parent"></account-search>。
v-on:change.native="handleChange"似乎根本不起作用。
<template>
<div>
<el-select :value="value" placeholder="Select" @change="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "accountSearch",props: {
value: {
type: String
}
},data(){
return {
options:[
{
value: 1,label: "hello"
},{
value : 2,label : "ola"
}
],loading: false,}
},mounted() {
},methods: {
handleChange: function (event) {
console.log(event.target.value);
// this.$emit('input',value);
},}
}
</script>
<style scoped>
</style>
非常感谢您的帮助。
解决方法
您在handleChange中获得的参数是value而不是event
<template>
<div>
<el-select :value="value" placeholder="Select" @input="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "accountSearch",props: {
value: {
type: String
}
},data(){
return {
options:[
{
value: 1,label: "hello"
},{
value : 2,label : "ola"
}
],loading: false,}
},mounted() {
},methods: {
handleChange: function (value) {
console.log(value);
this.$emit('input',value);
},}
}
</script>
<style scoped>
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
