recently, I am doing a list of playing audio. The list interface is a sub-component. It is found that through props data to the sub-component, the data in the array has changed, but the interface has not been updated, which is a bit depressing
. 
part of the code is as follows:
subcomponent:
props:{
punchCardData:Array,
pauseChildAllAudio:{
type:Boolean,
},
watchSelfFlag:{
type:Number
}
},
watch:{
pauseChildAllAudio(newV,oldV){
this.pauseAll();
},
punchCardData(newV,oldV){
this.mPunchCardData = newV;
this.$nextTick(()=>{
this.init();
})
}
},/**
*
* @param item
* @param index
*/
handlePlay(item,index){
const len = this.sounds.length;
for(let i=0;i<len;iPP){
if(this.sounds[i]){
this.sounds[i].pause();
this.mPunchCardData[i].play = true;
}
}
this.currentIndex = index;
this.$set(item,"play", false);
if(this.sounds[index]){
this.sounds[index].play();
this.$set(item,"duration",this.formatTime(Math.round(this.sounds[index].duration())));
requestAnimFrame(this.step.bind(this));
this.$emit("pauseTheOnAuido");
}
}, step(){
const self = this;
// Determine our current seek position.
if(this.sounds[this.currentIndex]){
let seek = this.sounds[this.currentIndex].seek() || 0;
let progress = document.getElementsByClassName("progress-bar")[this.currentIndex]
let progressDot = document.getElementsByClassName("progressDot")[this.currentIndex]
// this.mPunchCardData[this.currentIndex].current = this.formatTime(Math.round(seek))
this.$set(this.mPunchCardData[this.currentIndex],"current",this.formatTime(Math.round(seek)));
progress.style.width = (((seek / this.sounds[this.currentIndex].duration()) * 100) || 0) + "%";
progressDot.style.left = (((seek / this.sounds[this.currentIndex].duration()) * 100) || 0) + "%";
if (this.sounds[this.currentIndex].playing()) {
requestAnimFrame(this.step.bind(self));
}
if(this.mPunchCardData[this.currentIndex].current===this.mPunchCardData[this.currentIndex].duration){
this.sounds[this.currentIndex].stop();
this.mPunchCardData[this.currentIndex].play = true;
this.$set(this.mPunchCardData[this.currentIndex], "play",true);
}
}
},I wonder why the data has changed, but it is not displayed on the page.