34 lines
1.1 KiB
Vue
34 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<v-select multiple v-model="selectedLabels" :options="labels" @search="addOption">
|
||
|
|
<template v-slot:option="option">
|
||
|
|
<span class="py-1 px-2" :style="`background-color: ${option.color};color: ${invertColor(option.color, true)};`">{{ option.label }}</span>
|
||
|
|
</template>
|
||
|
|
</v-select>
|
||
|
|
<input v-for="label of selectedLabels" type="hidden" :key="label.code" :value="label.code" :name="name + '[]'" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
mounted() {
|
||
|
|
let data = JSON.parse(this.$parent.$options.json)
|
||
|
|
this.name = data.name
|
||
|
|
for(let label of (data.value ?? [])) {
|
||
|
|
this.selectedLabels.push({label: label.name, code: label.id, color: label.color})
|
||
|
|
}
|
||
|
|
for(let label of data.labels) {
|
||
|
|
this.labels.push({label: label.name, code: label.id, color: label.color})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
name: '',
|
||
|
|
selectedLabels: [],
|
||
|
|
inputValue: '',
|
||
|
|
labels: []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|