VueJs + ElementUi Change方法没有事件数据

问题描述

Vue＆Element UI的新功能。 我正在尝试使用ElementUI自动完成/选择组件制作自定义组件。

我的问题是@change方法没有event.target.value值。

我得到一个

v-on处理程序中的错误：“ TypeError：无法读取以下项的属性'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>