vue組件model應用

Vue.component('weiji-input', {
    model: {
        prop: 'wjlx',
        event:'selectweiji'
    },
    props:['wjlx'],
    data: function () {
        return {
        };
    },
    computed:{
        lx: {
            get: function () {
                return this.wjlx;
            },
            set: function (val) {
                this.$emit('selectweiji', val);
            }
        }
    },
    methods: {
        querySearch: function (queryString, cb) {
            var restaurants = this.loadAll();
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        loadAll: function () {
            return [{ value: '警告' }, { value: '嚴重警告' }, { value: '記過' }, { value: '作弊' }, { value: '留校察看' }, { value: '勒令退學' }, { value: '開除學籍' }];
        }
    },
    template: '<el-autocomplete class="inline-input" v-model="lx" \
                    :fetch-suggestions="querySearch"  \
                    :trigger-on-focus="true" placeholder="請輸入"   \
                    :select-when-unmatched="true"  \
                    clearable size="mini"  style="width:130px;">\
            </el-autocomplete>'
});

調用示例：

<weiji-input v-on:selectweiji="setweiji"  v-model="forminfo.wjlx"></weiji-input>