82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<VueSelect
|
|
v-model="value"
|
|
:options="labels"
|
|
@search="addOption"
|
|
/>
|
|
<input
|
|
type="hidden"
|
|
:value="inputValue"
|
|
:name="name"
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import VueSelect from "vue-select";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
VueSelect,
|
|
},
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "{}"),
|
|
data = JSON.parse(json);
|
|
|
|
this.name = data.name;
|
|
this.labels = data.labels;
|
|
this.inputValue = data.value;
|
|
this.value = {
|
|
code: this.labels.length,
|
|
label: this.inputValue,
|
|
};
|
|
for (let label of this.labels) {
|
|
label.default = true;
|
|
if (label.label == data.value) {
|
|
this.value = label as {
|
|
code: number;
|
|
label: string;
|
|
};
|
|
}
|
|
}
|
|
},
|
|
data(): {
|
|
name: string;
|
|
value: {
|
|
code: number;
|
|
label: string;
|
|
};
|
|
inputValue: string;
|
|
labels: LaravelModelList;
|
|
} {
|
|
return {
|
|
name: "",
|
|
value: {
|
|
code: 0,
|
|
label: "",
|
|
},
|
|
inputValue: "",
|
|
labels: [],
|
|
};
|
|
},
|
|
watch: {
|
|
value() {
|
|
this.inputValue = this.value.label;
|
|
},
|
|
},
|
|
methods: {
|
|
addOption(newOption: string) {
|
|
if (newOption.length) {
|
|
for (let key in this.labels) {
|
|
if (!this.labels[key].default) {
|
|
this.labels.splice(Number.parseInt(key), 1);
|
|
}
|
|
}
|
|
this.labels.push({ label: newOption, code: this.labels.length });
|
|
}
|
|
},
|
|
},
|
|
});
|
|
</script>
|