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

Question

对 Vue 和 Element 相当陌生 UI。我正在尝试使用 ElementUI autocomplete/select 组件制作自定义组件。

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

我得到一个

Error in v-on handler: "TypeError: Cannot read property 'value' of undefined"

错误。下面是我的 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>

非常感谢任何帮助。

Answer 1

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

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

VueJs +ElementUi Change method has no event data

javascript

vue.js

vuejs2

element-ui