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

Posted 2023-02-22

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

【英文标题】：How do I get the DOM to render changes to computed data in a VUE.js Project

【发布时间】：2020-01-02 04:34:16

【问题描述】：

我正在关注上传图片的 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
            
            :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>

【问题讨论】：

在您的模板中有:value="Per"。 Per 是什么？

抱歉，这是一个错字，现已更正。

【参考方案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。

【讨论】：

抱歉，当我试图找到解决方案时，per 是一个错字，我发现一些东西说我必须引用不可变数据，所以我有一个名为 per 的数据对象，它指向 uploadPercentage，但它没有任何帮助

至于箭头功能，它工作得很好，谢谢。是否有可以链接的文档详细解释函数中对象的范围？谢谢。

@TomWalsh 我总是从 MDN 开始：developer.mozilla.org/en-US/docs/Web/javascript/Reference/… & developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…