VUE数据和页面不统一,更改了数据,页面未更改

在一般情况下,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()
    }
    }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值