tags are correctly restored on the taginput
This commit is contained in:
parent
005ef28f8c
commit
d88bae8536
|
@ -15,7 +15,8 @@
|
||||||
</template>
|
</template>
|
||||||
<o-taginput
|
<o-taginput
|
||||||
:modelValue="tagsStrings"
|
:modelValue="tagsStrings"
|
||||||
@update:modelValue="updateTags"
|
@remove="remove"
|
||||||
|
@add="add"
|
||||||
:data="filteredTags"
|
:data="filteredTags"
|
||||||
:allow-autocomplete="true"
|
:allow-autocomplete="true"
|
||||||
:allow-new="true"
|
:allow-new="true"
|
||||||
|
@ -69,6 +70,8 @@ const id = computed((): string => {
|
||||||
|
|
||||||
const { load: fetchTags } = useFetchTags();
|
const { load: fetchTags } = useFetchTags();
|
||||||
|
|
||||||
|
initTagsStringsValue();
|
||||||
|
|
||||||
const getFilteredTags = async (newText: string): Promise<void> => {
|
const getFilteredTags = async (newText: string): Promise<void> => {
|
||||||
text.value = newText;
|
text.value = newText;
|
||||||
const res = await fetchTags(
|
const res = await fetchTags(
|
||||||
|
@ -91,11 +94,16 @@ const filteredTags = computed((): ITag[] => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(props.modelValue, (newValue, oldValue) => {
|
// TODO It seems that '@update:modelValue="updateTags"' does not works anymore...
|
||||||
if (newValue != oldValue) {
|
// so temporarily call the function updateTags() at remove and add tag event
|
||||||
tagsStrings.value = propsValue.value.map((tag: ITag) => tag.title);
|
// https://github.com/oruga-ui/oruga/issues/967
|
||||||
}
|
function remove() {
|
||||||
});
|
updateTags(tagsStrings.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function add() {
|
||||||
|
updateTags(tagsStrings.value);
|
||||||
|
}
|
||||||
|
|
||||||
const updateTags = (newTagsStrings: string[]) => {
|
const updateTags = (newTagsStrings: string[]) => {
|
||||||
const tagEntities = newTagsStrings.map((tag: string | ITag) => {
|
const tagEntities = newTagsStrings.map((tag: string | ITag) => {
|
||||||
|
@ -106,4 +114,34 @@ const updateTags = (newTagsStrings: string[]) => {
|
||||||
});
|
});
|
||||||
emit("update:modelValue", tagEntities);
|
emit("update:modelValue", tagEntities);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function isArraysEquals(array1: string[], array2: string[]) {
|
||||||
|
if (array1.length !== array2.length) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < array1.length; i++) {
|
||||||
|
if (array1[i] !== array2[i]) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initTagsStringsValue() {
|
||||||
|
// This is useful when tag data is already cached from the API during navigation inside the app
|
||||||
|
tagsStrings.value = propsValue.value.map((tag: ITag) => tag.title);
|
||||||
|
|
||||||
|
// This watch() function is useful when tag data loads directly from the API upon page load
|
||||||
|
watch(propsValue, () => {
|
||||||
|
const newTagsStrings = propsValue.value.map((tag: ITag) => tag.title);
|
||||||
|
|
||||||
|
// Changing tagsStrings.value triggers updateTags(), updateTags() triggers this watch() function again.
|
||||||
|
// To stop the loop, edit tagsStrings.value only if it has changed !
|
||||||
|
if (!isArraysEquals(tagsStrings.value, newTagsStrings)) {
|
||||||
|
tagsStrings.value = newTagsStrings;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue