Vue.setは応答オブジェクト属性に応じ添加、および表示更新トリガ配列要素を設定します

まず、なぜ必要がVue.setを使用するには?

  VUE 2つの変形を検出することができず、オブジェクトの配列:

  1、配列の長さの変化vm.arr.length = 4

  2、配列コンテンツvm.arr指標によって[1] = 'A'

  Vueの$セット(ターゲット、キー、値):.配列を動的に追加して、データ・オブジェクトを変更し、ビューに表示データを更新することができます。

  ゲッターとセッターの採用にコンストラクタVUE新しいヴュー()は、これらの2つの方法、結合データの終了をObject.defineProperty場合。したがって直接vm.arr [1] =「A」メソッドは、トリガ更新VUEビュー内の値に変更することができない、ヴュー。$セット()JSをカプセル化しながら方法Object.definePropertyによって変更しなければなりませんでした方法の基礎となるObject.defineProperty。

  だから我々はVue.set()応答新規および変更されたデータを使用する必要があります。

二、Vue.set使用

  Vueが追加または削除されたオブジェクトのプロパティを検出することはできません。

  Vueのプロパティゲッター/セッター変換プロセスで実行するので、それを作るためにインスタンスVueの変換を初期化するときに応答するようにプロパティは、データオブジェクト上に存在しなければならない。ため 例えば:

データ(){
     リターン{ 
        形:{ 
            合計:10 
        } 
    } 
} 
 
// this.form.totalに応答する
 
// 直接に非応答性、増加させる場合
、この .form.showFlag =をtrueに  // 非応答式

  使用Vue.set(オブジェクト、キー、値)ネストされたオブジェクトへの応答属性の方法。Vue.set(this.form, 'showFlag', true)

  また、VM $がエイリアスグローバルVue.set方法であるインスタンスメソッドを、設定し使用することができます。this.$set(this.form, 'showFlag', true)

  このように、this.form.showFlagはの応答性です。

  Vue.set(ターゲット、キー/インデックス、値) 応答オブジェクトにプロパティを追加し、新しい属性も応答することを確認し、ビューの更新トリガ。できない新しいVueのは、(のような共通の属性を検出するので、それを応答オブジェクトに新しい属性を追加するために使用する必要があります  this.obj.newProperty = 'hi'

  公式文書:https://cn.vuejs.org/v2/api/#Vue-set

Vue.set(ターゲット、プロパティ名/インデックス値)

  • パラメータ

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value
  • 戻り値:値セット。

  • 使用法

    応答オブジェクトにプロパティを追加し、新しいプロパティも応答することを確認し、ビューの更新をトリガします。できない新しいVueのは、(のような共通の属性を検出するので、それを応答オブジェクトに新しい属性を追加するために使用する必要がありますthis.myObject.newProperty = 'hi'

    オブジェクトは、Vueのインスタンスではないことに注意してください、またはインスタンスのルートデータオブジェクトヴュー。手段、この方法は、サブアレイデータオブジェクト内で使用されるが、直接データのために使用されないことができる(複数のデータ)を設定または実施例VUE

VaRの VM = 新しいヴュー({ 
EL:" #div " 
  データ:{ 
    アイテム:[ ' A '' B '' C ' ] 
  } 
})。
 
Vueの。セット(vm.items、2" "

  セット配列要素:Vue.set(vm.items、2、 "リン")素子アレイ2は、 "リン"、配列[ "A"、 "B" のvm.items添字ことを示し、 "C"]は変更される[ "A"、 "B"、 "リン"]

 

おすすめ

転載: www.cnblogs.com/goloving/p/10986120.html