vueでの$forceUpdateの使用

vueの$forceUpdateは強制更新という意味です
データのバインドは心配する必要はありません.例えば、dataにnameの変数があると、ページの内容を変更すると自動的に変化します.
しかし、複雑なオブジェクト、例えばオブジェクトの配列に対して、配列上の要素に直接属性を追加すると、vueは変更が発生したことを知ることができません.

//    
"info">
 data() {
    return {
      info:{}
    }
  },

//   

    info:{{ info }} 
    

  props:{
        info:Object
    },
    methods: {
        headleChange(e){
            this.info.name = e.target.value;
        }
    },

私たちはinfoに直接あげてみました.nameは値を割り当てて、ページに効果がないことを発見します;
では、$forceUpdateを利用します.データを修正したからです.しかし、ページ層は変更されていません.データ自体が修正されたことを示していますが、vueは傍受されていません.$forceUpdateを使うのは最新のデータに従ってレンダリングすることに相当します.
方法1:

 headleChange(e){
    this.info.name = e.target.value;
    this.$forceUpdate()
}

方法2:

 headleChange(e){
      this.$set(this.info,'name',e.target.value) 
}

 
転載先:https://www.cnblogs.com/caoruichun/p/10769242.html