tags are correctly restored on the taginput

This commit is contained in:
Massedil 2024-06-26 09:55:25 +00:00 committed by setop
parent 005ef28f8c
commit d88bae8536

View file

@ -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>