Uers.vue

<template>
    <el-container>
        <el-container style="margin-left: 15px; width: 150px">
            <el-autocomplete
                class="inline-input"
                v-model="user"
                :fetch-suggestions="filterUsers"
                placeholder="add user"
                @select="handleSelect"
            ></el-autocomplete>
            <el-button type="info" icon="el-icon-plus" @click="addUser(user)">Add</el-button>
        </el-container>
    </el-container>
</template>

<script>
    import _ from 'lodash'
    export default {
        name: "Users",
        props: {
            allusers: Array,
            value: Array
        },
        data() {
            return {
                selectedUsers: [],
                user: ''
            }
        },
        watch: {
            selectedUsers() {
                this.$emit('input', this.selectedUsers)
            }
        },
        methods: {
            addUser(user) {
                this.selectedUsers.push(user)
                this.user = ''
            },
            filterUsers(user, cb) {
                console.log(user)
                cb(['qqq', 'zzz'])
                //return this.allusers.filter(x => _.includes(x.f+x.t, user))
            },
            handleSelect() {
            }
        },
        mounted() {
            this.selectedUsers = this.value
        }
    }
</script>

<style scoped>

</style>