<template> <Select v-model="brandId" @on-change="selectChange" clearable> <Option v-for="option in optionList" :value="option.brandId" :key="option.brandId"> {{option.brandName}} </Option> </Select> </template> <script> import _ from 'lodash'; import BrandService from 'services/product/brand-service'; export default { name: 'select-brand', props: { value: { type: [Number, String], default: 0 } }, created() { this.brandService = new BrandService(); this.brandService.getBrand().then((res) => { this.optionList = res.data; }); }, data() { return { brandId: this.value, optionList: [] }; }, watch: { value(val) { this.brandId = val; } }, methods: { selectChange(brandId) { this.$emit('input', brandId); this.$emit('change', _.find(this.optionList, {brandId})); } } }; </script> <style lang="scss" scoped> .field-label { line-height: 32px; } </style>