如何让 DOM 呈现对 VUE.js 项目中计算数据的更改
Posted
技术标签:
【中文标题】如何让 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/…以上是关于如何让 DOM 呈现对 VUE.js 项目中计算数据的更改的主要内容,如果未能解决你的问题,请参考以下文章