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()
    }
    }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章