Business background
< hr >imitates the effect of snapping up progress bars in Pinduoduo, as follows
- merchandise list is a component
goods, which renders a merchandise in a loop.
- the progress bar is a component
progressthat introduces into the loop of the list of items.
difficulties encountered
< hr >- when rendering a component, the values printed in the
mountedhook of the progress bar component are3090, respectively. - after the final rendering is completed
- the progress bar data of each item is taken from the progress bar data of the last item
90
sample code
< hr >index.vue
<template>
<goods :list.sync="list"></goods>
</template>
<script>
import goods from "componects/goods";
data () {
return {
list:[
{name:"xx", progress: 30},
{name:"bb", progress: 90},
]
}
}
components: {
goods
}
...
</scrip>goods.vue
<template>
<div>
<div v-for="item in list">
...
<progress :number="item.progress"></progress>
...
</div>
</div>
</template>
<script>
import progress from "./progress";
props: {
list: Array
}
components: {
progress
}
...
</scrip>progress.vue
<template>
<div :progress="progress"> </div>
</template>
<script>
props: {
progress: 0
},
mounted () {
console.log(this.progress); // => 30,90
}
</script>question
< hr >- Why is there such a problem? (feels the same as the problem with closure references)
- what is the solution?
