在一般情况下,Vue的数据和页面的绑定使用v-model就可以了,但是在父子组件中会遇到一些问题。
描述:
初始状态:['1','2','3']
点击2的删除后,页面显示['1','2'],然而此时数据为['1','3']
解决方案:
使用v-if实现手动挂载
template:
<Question v-if="resetflag" v-for="(item,index) in questionList"
:key="index"
@clickDelete="deleteitem(index)"
></Question>
script:
data: function () {
return {
questionList: [],
resetflag:true
}
},
methods:{
reload(){
this.resetflag=false
this.$nextTick(()=>{
this.resetflag=true
})
},
deleteitem(index){
this.questionList.splice(index,1)
for(let i=index; i<this.questionList.length; i++){
this.questionList[i].questionIndex--;
}
this.reload()
}
}