Vue3: Keep objects in array reactive

I'm adding an object to a reactive array, but when I update the object, I don't see the changes.

<script setup>
import { reactive, ref } from 'vue'

let key = ref(null)
let uploads = reactive([])

let uploadFile = (file) => {

    let upload = {
        key: key.value++
        name: file.name,
        type: file.type,
        size: file.size,
        state: 'uploading',
    }

    uploads.push(upload)
    
    // Upload Logic...
    
    upload.state = 'complete' // Doesn't work
}
</script>

This used to work in vue2, but to make this work in Vue3, you have to retrieve the object from the array first:

// Upload Logic...

upload = uploads[uploads.findIndex(el => el.key == upload.key)]
upload.state = 'complete' // Works

Is there any way to do this without having to retrieve the object each time?

Swaz

3 years ago

Level 20

Bump since I posted over the weekend.

Niush

3 years ago

Level 50

@Swaz It is most likely due to the asynchronous Upload Logic... code. State is being changed internally but not reflected. If you comment out the upload logic portion, and directly change the upload.state = 'complete', it should work as you expect.

One solution is to make the upload reactive as well:

let upload = reactive({
   key: key.value++,
   // ...
   state: 'uploading',
});

Or, stick with your solution with this refactor:

let pushedIndex = uploads.push(upload) - 1; // no need of another findIndex() call
// Upload Logic...
upload = uploads[pushedIndex]
upload.state = 'complete'

Swaz

3 years ago

Level 20

@Niush Thanks for the reply! I'll try this out in a couple days. Good call on the refactor

Please or to participate in this conversation.