Element: [Bug, Report], el-autocomplete, change, event, doesn't, work

Created on 9 Aug 2017 · 4Comments · Source: ElemeFE/element

Element UI version

1.4.1

OS/Browsers version

windows 7 / Chrome 58

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/rp6nyhcw/

Steps to reproduce

创建一个el-autocompelete, 添加@change事件，无法触发，在1.4.1和1.3.7都能复现
https://jsfiddle.net/rp6nyhcw/

What is Expected?

输入后能触发对应函数

What is actually happening?

el-autocomplete的change事件不能触发，作为对比添加了一个el-input, 能被触发

Source

gebeng

Most helpful comment

之前遇到过这样的需求，需要在使用autocomplete的时候使用 blur change等event，可以绕一下用async-validator来实现，有需求的朋友可以尝试下

<template>
    <el-form :model="postData" :rules="rules" ref="postData">                 
        <el-form-item label="姓名" prop="name">
            <el-autocomplete
                v-model="postData.name"
            ></el-autocomplete>
       </el-form-item> 
    </el-form>
</template>
<script>
export default{
    data() {
        let autocompleteBlur = (rule, value, callback) => {
        // 做你需要做的blur后的操作
        callback();
    }
    return {
            postData: {
        name: '',
            },
        rules: {
        name: [
                // 触发blur，执行autocompleteBlur方法
        { validator: autocompleteBlur, message: '', trigger: 'blur' },
        ],
        },      
    }
    }
}
</script>

yangmingkun187 on 18 Aug 2017

👍4

All 4 comments

Translation of this issue:

Element UI version

1.4.1

OS/Browsers version

Windows 7 / Chrome 58

Vue version

2.4.2

Reproduction Link

https://jsfiddle.net/rp6nyhcw/

Steps to reproduce

Creating a el-autocompelete, adding @change events, cannot trigger, and can be reproduced both in 1.4.1 and 1.3.7

Https://jsfiddle.net/rp6nyhcw/

What is Expected?

After input, the corresponding function can be triggered

What is actually happening?

The change event of el-autocomplete cannot be triggered, and a el-input is added as a contrast to be triggered

element-bot on 9 Aug 2017

Autocomplete doesn't have change event.

Leopoldthecoder on 9 Aug 2017

之前遇到过这样的需求，需要在使用autocomplete的时候使用 blur change等event，可以绕一下用async-validator来实现，有需求的朋友可以尝试下

<template>
    <el-form :model="postData" :rules="rules" ref="postData">                 
        <el-form-item label="姓名" prop="name">
            <el-autocomplete
                v-model="postData.name"
            ></el-autocomplete>
       </el-form-item> 
    </el-form>
</template>
<script>
export default{
    data() {
        let autocompleteBlur = (rule, value, callback) => {
        // 做你需要做的blur后的操作
        callback();
    }
    return {
            postData: {
        name: '',
            },
        rules: {
        name: [
                // 触发blur，执行autocompleteBlur方法
        { validator: autocompleteBlur, message: '', trigger: 'blur' },
        ],
        },      
    }
    }
}
</script>

yangmingkun187 on 18 Aug 2017

👍4

试图用blur来绑定的，但有时不起作用（原因还没查到），我这边后来通过绑定keyup.native 来解决的

gebeng on 28 Aug 2017

Was this page helpful?

0 / 5 - 0 ratings