Vuetify firebase 图像上传“观看”未触发

Question

我正在尝试将图像上传到 firebase 并将结果 URL 存储在数组中以及更新进度条。

图片上传正常并进入我的 firebase UI，但是我似乎无法让我的 Vue 观察程序触发并将 URL 存储到数组中。

我已将示例放入代码沙箱here。如果有人能发现我的错误，不胜感激

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

Answer 1

Vue 不允许向数据对象添加新的根级属性 在组件初始化之后。由于 Vue 执行 实例初始化期间的getter/setter转换过程，a 属性必须存在于数据对象中，以便 Vue 转换它并使其具有反应性。 Vuejs.org

在你的组件中你需要设置默认值uploadTask:

  data() {
    return {
      uploadTask: null,
   }
}

或者您可以使用Vue.set() 方法，在这种情况下这种方法不太干净。