I am trying to upload an image to firebase and store the resulted URL in an array as well as update a progress bar.
The image is uploading fine and making to to my firebase UI however I can t seem to get my Vue watcher to fire and store the URL into the array.
I have placed the example into a code sandbox here. Be grateful if someone could spot my mistake
"core-js": "^3.6.5",
"firebase": "^7.15.1",
"moment": "^2.26.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vue-uuid": "^2.0.2",
"vuetify": "^2.2.11",
"vuex": "^3.4.0",
"vuex-persistedstate": "^3.0.1"
Vue does not allow adding new root-level properties to the data object after the initialization of a component.Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive. Vuejs.org
In your component you need to set default value of uploadTask:
data() {
return {
uploadTask: null,
}
}
Or you can use Vue.set() method, which is less clean approach in this case.