如何让 DOM 呈现对 VUE.js 项目中计算数据的更改

Question

我正在关注上传图片的 Firebase 存储视频教程，可以在这里找到：https://www.youtube.com/watch?v=SpxHVrpfGgU&feature=youtu.be。

我尝试使用 Vue.JS 和 Vuetify 来构建示例应用程序。我以为我已经破解了它。但是，上传进度条不会呈现对 uploadPercentage 的更改。我什至尝试将 uploadPercentage 记录到控制台以测试它是否正在发生变化，并且它只是没有呈现。有谁知道为什么以及如何解决这个问题？

我的代码如下：

<template>
  <v-container style="height: 100%;">
      <v-row
        style="height: 30%;"
      ></v-row>
      <v-row
        align-content="center"
        justify="center"
      >
        <h1>Image Uploader</h1>
      </v-row>
      <v-row
        align-content="center"
        justify="center"
      >
        <v-col cols="6">
          <v-progress-linear
            color="deep-purple accent-4"
            rounded
            height="6"
            :value="uploadPercentage"
            id="uploader"
          ></v-progress-linear>
        </v-col>
      </v-row>
      <v-row
        align-content="center"
        justify="center"
      >
        <v-col
          class="align-content-center"
          cols="4"
        >
          <v-file-input
            v-model="file"
            accept="image/*"
            label="choose an image"
            outlined
            @change="onFileChange"
            ></v-file-input>
        </v-col>
        <v-col
          class="align-content-center mt-2"
          cols="2"
        >
          <v-btn
            @click="onUpload"
          >
            Upload
            <v-icon right dark>mdi-cloud-upload</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
</template>

<script>
import firebase from '@/firebase/init'

export default {
  data: () => ({
    file: null,
    imageURL: null,
    uploadPercentage: 0
  }),
  methods: {
    onFileChange () {
      let reader = new FileReader()
      reader.onload = () => {
        reader.imagUrl = reader.result
      }
      reader.readAsDataURL(this.file)
    },
    onUpload () {
      // create a firebase storage ref
      var storageRef = firebase.storage().ref('public_wall/' + this.file.name)

      // upload file
      var task = storageRef.put(this.file)

      // update progress bar
      task.on('state_changed',

        function progress (snapshot) {
          var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          console.log(percentage)
          this.uploadPercentage = percentage
          console.log(this.uploadPercentage)
        },

        function error (err) {
          console.log(err)
        },

        function completed () {

        }

      )
    }
  }
}
</script>

Answer 1

我发现了两个问题。

首先是这个：

:value="Per"

应该是：

:value="uploadPercentage"

其次，您的this 不会指向progress 函数内的正确对象。如果您使用箭头函数，它将保留 this 的值以匹配周围的范围：

task.on('state_changed',
  snapshot => {
    var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
    console.log(percentage)
    this.uploadPercentage = percentage
    console.log(this.uploadPercentage)
  },
  // etc.

您可以在函数中使用console.log(this) 确认此问题。

使用箭头函数有多种替代方法。例如，您可以将该函数移到它自己的 Vue 方法中。 Vue 自动将methods 中的函数绑定到相应的this。