Vue.$set()

開発の過程で、vueのdataで宣言されたり、割り当てられたオブジェクトや配列(配列内の値はオブジェクト)が宣言されたりすると、オブジェクトに新しい属性が追加され、この属性の値が更新されてもビューは更新されません.公式ドキュメント定義によると、インスタンスの作成後に新しいプロパティをインスタンスに追加した場合、ビューの更新はトリガーされません.現代のJavaScriptの制約(およびObject.observeの廃棄)により、Vueはオブジェクト属性の追加または削除を検出できません.Vueはインスタンスの初期化時に属性に対してgetter/setter変換プロセスを実行するため、Vueを変換するには、属性がdataオブジェクト上に存在する必要があります.そうすれば、応答することができます.次の例を参照してください.

 
  export default {
      data(){
            return {
                obj:{}
            }
      },
      mounted() {
        this.obj = {d: 0};
        this.obj.e = 0;
        console.log('after--', this.obj);
      },
     methods: {
        addd(item) {
            item.d = item.d + 1;
            console.log('item--',item);
        },
        adde(item) {
            item.e = item.e + 1;
            console.log('item--',item);
        }
       }
  }
 </scirpt>

</code></pre> 
  <p><a href="https://img.  .com/image/info8/c361b183f2374c269eaf32176d8c0fd1.webp" target="_blank"><img src="https://img.  .com/image/info8/c361b183f2374c269eaf32176d8c0fd1.webp" alt="Vue.$set()_ 1   " width="582" height="111" style="border:1px solid black;"></a></p> 
  <p>    d    get   set   ，    e      。<br>     3 addd，    3 adde,            </p> 
  <p><a href="https://img.  .com/image/info8/00b9fd1ce70f490f9acf9dbf8e0e4014.webp" target="_blank"><img src="https://img.  .com/image/info8/00b9fd1ce70f490f9acf9dbf8e0e4014.webp" alt="image.png" width="402" height="45"></a><br> <a href="https://img.  .com/image/info8/32bced6184b84f1385cd3c52501efd98.webp" target="_blank"><img src="https://img.  .com/image/info8/32bced6184b84f1385cd3c52501efd98.webp" alt="Vue.$set()_ 2   " width="433" height="104" style="border:1px solid black;"></a></p> 
  <p>    1 addd,      ：</p> 
  <p><a href="https://img.  .com/image/info8/50c0c81cb54a4754b203803a5345f9bc.webp" target="_blank"><img src="https://img.  .com/image/info8/50c0c81cb54a4754b203803a5345f9bc.webp" alt="         " width="437" height="63"></a><br> <a href="https://img.  .com/image/info8/a8650b9af0b34b8f8c18b3d4b97bf1c3.webp" target="_blank"><img src="https://img.  .com/image/info8/a8650b9af0b34b8f8c18b3d4b97bf1c3.webp" alt="Vue.$set()_ 3   " width="507" height="108" style="border:1px solid black;"></a></p> 
  <p>      ，      e，       ，       ，       d      ，        e          <br>     <br>     ：<br> Vue                           (root-level reactive property)。        Vue.set(object, key, value)                 ：</p> 
  <pre><code>Vue.set(vm.obj, 'e', 0)
</code></pre> 
  <p>       vm.$set     ，      Vue.set      ：</p> 
  <pre><code>this.$set(this.obj,'e',02)
</code></pre> 
  <p>                ，     Object.assign()   _.extend()        。  ，                。                ，               ：<br> //    Object.assign(this.obj, { a: 1, e: 2 })</p> 
  <pre><code>this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })
</code></pre> 
  <p>        ：</p> 
  <p><a href="https://img.  .com/image/info8/c43ffb8ffe434056be6e1b351effa7e1.webp" target="_blank"><img src="https://img.  .com/image/info8/c43ffb8ffe434056be6e1b351effa7e1.webp" alt="Vue.$set()_ 4   " width="476" height="106" style="border:1px solid black;"></a></p> 
  <p>    3 addd，    3 adde,            ：</p> 
  <p><a href="https://img.  .com/image/info8/7ba66ae25b1b458d8cb3fddea28e0d0a.webp" target="_blank"><img src="https://img.  .com/image/info8/7ba66ae25b1b458d8cb3fddea28e0d0a.webp" alt="image.png" width="402" height="54"></a></p> 
  <p><a href="https://img.  .com/image/info8/e928200832fc4845be05d1f192eb58ab.webp" target="_blank"><img src="https://img.  .com/image/info8/e928200832fc4845be05d1f192eb58ab.webp" alt="Vue.$set()_ 5   " width="507" height="137" style="border:1px solid black;"></a></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1187895793630158848"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません

デルノートwin 8システムwin 7システムの改装
sophia天雪
win7 デル システムを改装する win8

BeanUtils.copyProperties使用ノート
bylijinnan
java

MyEclipse中国語の文字化けしの問題
0624chenhong
MyEclipse

メールを送信
物心の知れないおなら
send email

アニメーション
韓国の赤い果物の番号を変えます
html css

ネット上で最も一般的な攻撃方法はSQL注入である。
藍児唯美
sql注入

JAvaノート2
a-john
java

[Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx”
aijuans
Androidの学習で遭遇したエラー

アルファベットで分類:
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号