记录vue子组件v-model

<template>
  <div>
    <v-text-field :label="hint" persistent-placeholder :value="label" readonly @click="show" clearable
      clear-icon="el-icon-close" @click:clear="clear" hide-details="auto" :rules="rule"></v-text-field>
    <v-bottom-sheet v-model="sheet">
      <v-sheet height="380px">
        <v-list subheader dense class="py-0" style=" height:380px; overflow-y: auto;">
          <v-list-item-group v-model="innerValue" color="primary" @change="selectcampus">
            <v-list-item style="min-height:0px!important;height: 0px;"></v-list-item>
            <v-list-item  v-for="(campus, index) in campusListAll" :key="campus.deptId" :value="campus">
              <v-list-item-content>
                <v-btn class="pl-0 pr-0" style="justify-content: flex-start;" plain :ripple="false">
                  {{ campus.deptName }}
                </v-btn>
              </v-list-item-content>
              <v-list-item-action style="font-size: 14px; padding-right: 4px; color: #1e1e1e">
                {{ campus.deptId }}
              </v-list-item-action>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-sheet>
    </v-bottom-sheet>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: 'v-selectCampus-select',
  props: {
    value: {
      type: [String, Number],
    },
    hint: {
      type: String,
      default: '校区'
    },
    rule:{
      type:Array,
      default:()=>[v => !!v || '请输入校区']
    }
  },
  computed: {
    ...mapGetters(["campusListAll"]),
  },
  watch: {
    value: {
      handler(val) {
        if(val){
          this.innerValue = this.campusListAll.find(campus => campus.deptId == this.value)
          this.label = this.campusListAll.find(campus => campus.deptId == this.value).deptName
        }else{
          this.innerValue = null
          this.label = ''
        }
      }
    },
  },
  created() {
    if(this.value){
      this.innerValue = this.campusListAll.find(campus => campus.deptId == this.value)
      this.label = this.campusListAll.find(campus => campus.deptId == this.value).deptName
    }
  },
  data() {
    return {
      label: '',
      sheet: false,
      name: '',
      innerValue: null,
      queryParams: {
        // status: 'GOING',
        nickName: '',
        roleId: 103
      },
    }
  },
  methods: {
    clear() {
      this.$emit('input', null)
      this.$emit('change')
    },
    show() {
      this.sheet = true
    },
    selectcampus(campus) {
      this.sheet = false
      this.label = campus.deptName 
      this.$emit('input', campus.deptId)
      this.$emit('change')
    },
  }
}
</script>


<style scoped></style>