解決vueで1回目のデータが取れず、2回目からしか取れない場合

this.$nextTick
1つ目のケース:
ページは変わりましたが、データは変わりません.this.$を使用しています.nextTick,公式サイトでは,コールバックを次回のDOM更新サイクルに遅延して実行すると説明している.データを変更した直後に使用し、DOMの更新を待ちます.ケースを通して、次のことを理解します.

import test from "./components/test";
export default {
  name: "App",
    components: {
    test,
  },
  methods: {
    change() {
    this.$refs.test.change()
    },
  },
};

export default {
  name: "test",
  data() {
    return {
      name: "  ",
    };
  },
  methods: {
    change() {
      this.name = "  ";
       console.log(this.$refs.name.innerHTML)
    },
  },
};
</code></pre> 
  <h6>       ，         change  ，  name，             dom    name,    dom    ，                ：</h6>   ： 
  <p><a href="https://img.  .com/image/info8/8e9ffc2043f24ac0b8edce322bbedea9.jpg" target="_blank"><img src="https://img.  .com/image/info8/8e9ffc2043f24ac0b8edce322bbedea9.jpg" alt="  vue         ，          _ 1   " width="650" height="122" style="border:1px solid black;"></a></p> 
  <h6>         ，     dom      ，            dom      ，           DOM        ，    ：</h6> 
  <pre><code class="prism language-   ">  methods: {
    change() {
      this.name = "  ";
      this.$nextTick(()=>{
          console.log(this.$refs.name.innerHTML)
      })
    },
  },
</code></pre> 
  <p>  ：</p> 
  <p><a href="https://img.  .com/image/info8/46c077bb8ff4443fb5d69e4b00feb48a.jpg" target="_blank"><img src="https://img.  .com/image/info8/46c077bb8ff4443fb5d69e4b00feb48a.jpg" alt="  vue         ，          _ 2   " width="650" height="111" style="border:1px solid black;"></a></p> 
  <h6>                 ，switch      ，    element table   ，       ，                  ，           ，    this.$nextTick  ，                  </h6> 
  <p><mark>setTimeout</mark></p> 
  <p>     ：</p> 
  <h6>  ：   yy   ，       id，content...     title,  title，   item  vuex  ，     ，           ，         ，       localStorage  ，       null，         ，     title，   content           ，    ，       ，               ，      null ？           ，      ，           ，     null，             ，            ，  setTimeout，   ，         ，      </h6> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1389001243011141632"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

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

rubyでhadoopのmapreduceを書きjarパッケージを生成する方法
wudixiaotie
mapreduce

JAvaプログラミング思想--アクセス制御権限
ユリはお茶じゃない
java アクセス制御権限 単一モード

[生物と医学]ザリガニは慎重に食べてください
comsci
せいぶつ

org.apache.jasper.JasperException: Unable to compile class for JSP:
ビジネスマン
maven 2.2 jdk1.8

ごみを処理したの?GC
oloz
GC

shiroとSESSSION
楊白
shiro

モバイルインターネット端末淘宝客はどのように利益を実現するか
みかん
モバイルクライアント 客をさらう 淘宝App

wordpressガジェット作成
aichenglong
wordpress ガジェット

アルファベットで分類:
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号