英文:
In vue3, the value of progress in fake-progress is not updated in the view, it is always 0
问题
在Vue 3中，我想为网络请求添加一个进度条，所以我使用了 fake-progress，但我无法使用它，因为它的值没有响应性。
这是我的代码：
<template>
<div>
{{ progress }}
</div>
</template>
<script setup>
import FakeProgress from 'fake-progress';
import { reactive, toRef } from 'vue';
let fake = new FakeProgress({
timeConstant: 1000,
autoStart: true,
});
let fakeRef = reactive(fake);
let progress = toRef(fakeRef, 'progress');
setInterval(() => {
console.log(fake.progress);
console.log(fakeRef.progress);
console.log(progress);
}, 1);
</script>
所有的值都在变化，但在视图中 {{progress}} 始终是0。如何解决这个问题？为什么会这样，呜呜呜？
我想让页面上的数字在变化。
英文:
in vue3,I want to add a progress bar for network requests,so i use fake-progress,but i can use it, because its value is not responsive
there is my code :
<template>
<div>
{{ progress }}
<!-- <el-progress type="circle" :percentage="parseInt(progress * 100)"></el-progress> -->
</div>
</template>
<script setup>
import FakeProgress from 'fake-progress';
import { reactive, toRef, watch, watchEffect } from 'vue';
let fake = new FakeProgress({
timeConstant: 1000,
autoStart: true,
})
let fakeRef = reactive(fake)
let progress = toRef(fakeRef, 'progress')
setInterval(() => {
console.log(fake.progress);
console.log(fakeRef.progress);
console.log(progress);
}, 1);
</script>
all of the value is changed, but in the view {{progress}} is always 0
how can i do it? why is this，wuwuwu
I want the numbers on the page to be changing
答案1
得分: 0
FakeProgress不是vue响应式。因此我们需要在这里添加一些响应性...
一种简单的解决方案是覆盖progress属性并在更改时更新您的进度ref：
一个更聪明的解决方案是将响应式对象作为this提供给构造一个FakeProgress的实例：
英文:
The FakeProgress isn't a vue reactive. So we need to add some reactivity here...
A simple solution would be to override the progress property and update your progress ref on changes:
<script setup>
import FakeProgress from 'fake-progress';
import { ref } from 'vue';
const fake = new FakeProgress({
timeConstant: 1000,
autoStart: true,
});
const progress = ref(0);
Object.defineProperty(fake, 'progress', {
set(val){
progress.value = val;
},
get(){
return progress.value;
}
});
</script>
<template>
<div>
{{ progress }}
</div>
</template>
A more clever solution would be to provide a reactive object as this to construct a FakeProgress's instance:
<script setup>
import {FakeProgress} from './fake-progress.js';
import { reactive } from 'vue';
// create our custom reactive instance
const fake = reactive({});
// set prototype
Object.setPrototypeOf(fake, FakeProgress.prototype);
// call constructor
FakeProgress.bind(fake)({
timeConstant: 1000,
autoStart: true,
});
</script>
<template>
<div>
{{ fake.progress }}
</div>
</template>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论