vu 2.5.2 in typescriptでサブコンポーネントにアクセスする2.4.2

Question

Typescript 2.4.2を使用しているときにvue 2.5.2のサブコンポーネントにアクセスしようとすると少し問題が発生しました。

私はKeen UI UiSelectコンポーネントに、$ refにref = "selectfield"属性を加えて、これを使ってVueコンポーネントにアクセスしてみようとしています。$ refs.selectfield。 UI-Selectコンポーネントは、v-if = "showSelect"ディレクティブではレンダーされません。

onClickSpan(){ 
    showSpan = false; 
    showSelect = true; 
    console.dir(this.$refs); 
    console.dir(this.$refs.selectfield); 
} 

私はrefで2つの異なる要素を参照しました。 。 私はすでにコンソールでこれを出力する$、参考文献を試してみましたし、オブジェクトselectfieldは間違いなくあります：。残念ながら、アクセスしようとしている

>{…} 
|> currentNumField: <div style="width: 100%;"> 
|> selectfield: Object { _uid: 32, _isVue: true, "$options": {…}, … } 
|> __proto__: Object { … } 

undefined 

それは常にこの$のrefs.selectfieldが未定義であることを私に教えてくれます。 私はVueとTypescriptをかなり新しくしていますが、この問題を引き起こす可能性があるのか​​分かりません。

ありがとうございます。

Answer 1

もう少し情報をお願いします。 例を見てください https://jsfiddle.net/Jubels/50wL7mdz/78450/

これを$ refs.paraGはノードを返します。

これ。$ refs.customはVUEコンポーネント

<p ref="paraG">{{ message }}</p> 

<custom-component ref="custom">{{ message }}</custom-component> 

を返すという問題がどこから来たのか、これは任意の不確実性

Answer 2

をクリア希望は私は確かではないけど、誰もが、ここで同様の問題が発生するためであります可能な解決策：

v-ifの代わりにv-showを使用します。

問題は、v-ifを使用してDOMをレンダリングする方法と関連があるようです。 DOM要素への参照は、自分のコンポーネントの$ refs属性に追加されますが、変数$ refs.mycomponentは空です。v-ifで非表示になっている要素はレンダリングされず、DOMに追加されないためです。

私は、オブジェクトを可視にした後で遅延を試みましたが、それは問題を解決しませんでした。 これは、Vueだけを使用しているときにv-ifで動作するため、DOMが再レンダリングされるたびに$ refs属性を適切に更新しないtypescriptの問題が原因であると想定できます。