I have a Vue3 component where I can drag a file, get the stream end do the decoding.
The result of that decoding is an iterator, messages in this case.
I see all results after everything is done, but I would like to see the results faster. Is there a way to force the render faster?
Here is an example. With console.log I see the messages decoding, but there is nothing rendered until all is done. I tried updating messages in other ways like messages.value = [...messages.value, msg]
, but with the same result.
<script setup>
import { ref } from 'vue'
let messages = ref([])
async function processFile(file) {
const messages = await Foo.decode(file.stream())
for await (var msg of messages()) {
console.log({msg})
messages.value.push(msg)
}
}
function handleDrop(ev) {
if (ev.dataTransfer.items) {
;[...ev.dataTransfer.items].forEach((item) => {
if (item.kind === 'file') {
const file = item.getAsFile()
processFile(file)
}
})
} else {
// Use DataTransfer interface to access the file(s)
;[...ev.dataTransfer.files].forEach((file) => {
processFile(file)
})
}
}
</script>
<template>
<div
class="dropzone"
v-on:dragover.prevent="() => ..."
v-on:drop.prevent="handleDrop"
v-on:dragleave.prevent="() => ..."
>
Drop here
</div>
<div v-for="(message, index) in messages" :key="index">
{{message.something}}
</div>
</template>