<template>
  <div style="margin-top: 10px">
    <el-tag class="role-item" v-model="_value" v-for="(role, index) in _value" :key="index + '_role'"
            closable size="mini" @close="removeRoleItem(index)">
      {{ role.name }}
    </el-tag>
  </div>
</template>

<script setup>
import {computed, defineProps,defineEmits} from "vue";
const emit =defineEmits(["input"])
const props = defineProps({
  modelValue: {
    type: Array,
    default: []
  }
})
const _value = computed({
  get(){
    return props.modelValue||''
  },
  set(val) {
    emit("input", val)
  }
})
const removeRoleItem = (index) => {
  _value.value.splice(index, 1)
}
</script>

<style scoped>
.role-item {
  margin: 5px;
}
</style>
