v-ifが異なる動作をする：vueプロジェクト1.xから2.xへの移行

Question

私のvueプロジェクトで、私は1.xから2.xにアップグレードするつもりです。そして、私は次のような問題に遭遇：子コンポーネントservice上

<div id="demo"> 
    <service :service-name="serviceName" ref="testcomp" v-if="runTest"></service> 
</div> 

、私はその存在を制御するために v-ifを使用しています。そして、親コンポーネントで、私は次のように子コンポーネント内で定義されたメソッドを呼び出すために test this.$refs.testcompを使用したい：

methods: { 
    init() { 
     this.runTest = true; 
    }, 
    }, 
    mounted() { 
    this.init(); 
    }, 
    watch: { 
    runTest() { 
     if(this.runTest) { 
     console.log('1'); 
     this.$refs.testcomp.test(); 
     console.log('2'); 
     } 
    }, 
    }, 

しかし、エラーメッセージがthis.$refs.testcompが定義されていないと述べました。私はjsfiddleでライブデモを作成しました：https://jsfiddle.net/baoqger/0r4vby5n/1/

しかし、vue1.xではうまく動作します。 https://jsfiddle.net/baoqger/fzuajwkz/1/

私はv-showへの変更を知っていますが、この問題をスキップできます。しかし、私の実際のプロジェクト（これは大きなプロジェクトで、他人によって開発されました。したがって、v-ifをv-showに変更すると、ワークフローに関連する他の問題が発生します）。アップグレードされたバージョンでv-ifを動作させる方法はありますか？

Answer 1

これを呼び出すと、$ refs.testcomp.test（）という要素がまだ用意されていないからだと思います。代わりにこれを試してみてください：

this.$nextTick(() =>{ 
    this.$refs.testcomp.test(); 
})