input模糊匹配 组件赋值问题

<template>
    <el-autocomplete
        v-model="svalue"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        size="small"
        @select="setUserInfo"
    ></el-autocomplete>
</template>

<script>
    import {getUserList} from  '@/api/dictionary_option'

    export default {
        data() {
            return {
                restaurants: [],
                svalue: this.value
            };
        },
        props: {
            value: {
                type: String
            }//接受外部v-model传入的值
        },
        watch:{
            //判断下拉框的值是否有改变
            value(val) {
                this.svalue = val;//②监听外部对props属性value的变更，并同步到组件内的data属性svalue中
            },
            svalue(val, oldVal) {
                if(val == ""){
                    this.$emit('input', this.svalue);
                }
            },
        },
        methods: {
            getList(){
                let that = this;
                return getUserList(that.svalue)// 获取用户列表
                    .then((res) => {
                        let arr = [];
                        // el-autocomplete元素要求数组内是对象，且有value属性，此处做一个格式调整
                        $.each(res.data.result, function(i, item){
                            arr.push({
                                value: item.displayName, // 员工姓名+编码
                                sid: item.sid, // 员工id
                                userCode: item.userCode, // 员工编码
                                userName: item.userName, // 员工姓名
                                userNum: item.userNum // 员工工号
                            })
                        });
                        that.restaurants = arr;
                    }).catch(error => {
                        console.log(error);
                    });
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                cb(results);
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.indexOf(queryString.toLowerCase()) === 0);
                };
            },
            setUserInfo(item) {// item为选中字段所在的对象
                // console.log(item);
                this.svalue = item.userName;// 输入框展示姓名
                /* 子组件通过事件发射向父组件传递事件及参数，$emit即为发射事件
                  第一个参数为向父组件传递的事件名，第二个参数为向父组件传递的参数 */
                this.$emit( 'setUserInfo', item);// 回调  传参（整个对象，包括姓名、员工号）
            }
        },
        mounted() {
            // this.svalue=this.value;//初始话下拉框的值
            this.getList();
        }
    };
</script>

标签：svalue,queryString,value,item,组件,input,restaurants,赋值
来源： https://www.cnblogs.com/wplcc/p/11027532.html