計算されたプロパティでの$ refの使用

$refs計算された内部にアクセスするにはどうすればよいですか？計算されたプロパティが最初に実行されるときは、常に未定義です。

ここで私自身の質問に答えようとすると、他のどこにも満足のいく答えを見つけることができませんでした。計算を行うために、dom要素にアクセスする必要がある場合もあります。うまくいけば、これは他の人に役立つでしょう。

コンポーネントがマウントされたら、Vueをだまして計算されたプロパティを更新する必要がありました。

Vue.component('my-component', {
    data(){
        return {
            isMounted: false
        }
    },
    computed:{
        property(){
            if(!this.isMounted)
                return;
            // this.$refs is available
        }
    },
    mounted(){
        this.isMounted = true;
    }
})

Vuejsガイドを引用することが重要だと思います：

$ refは、コンポーネントがレンダリングされた後にのみ入力され、リアクティブではありません。これは、子を直接操作するためのエスケープハッチとしてのみ意図されています。テンプレートまたは計算されたプロパティ内から$ refにアクセスすることは避けてください。

したがって、それはあなたがすることになっていることではありませんが、いつでもそれを回避する方法をハックすることができます。

$refsアフターが必要な場合v-ifは、updated() フックを使用できます。

<div v-if="myProp"></div>


updated() {
    if (!this.myProp) return;
    /// this.$refs is available
},

私はこれと同じ問題を抱えていて、これが計算されたプロパティが機能しないタイプの状況であることに気づきました。

現在のドキュメント（https://vuejs.org/v2/guide/computed.html）によると：

「[...]計算されたプロパティの代わりに、メソッドと同じ関数を定義できます。最終結果として、2つのアプローチは実際にはまったく同じです。ただし、計算されたプロパティは、反応性に基づいてキャッシュされるという違いがあります。依存関係。計算されたプロパティは、そのリアクティブな依存関係の一部が変更された場合にのみ再評価されます。」

したがって、これらの状況で（おそらく）発生するのは、コンポーネントのマウントされたライフサイクルを終了し、参照を設定することは、計算されたプロパティの依存関係に対する反応的な変更としてカウントされないということです。

たとえば、私の場合、参照テーブルに選択された行がないときに無効にする必要があるボタンがあります。したがって、このコードは機能しません。

<button :disabled="!anySelected">Test</button>

computed: {
    anySelected () {
      if (!this.$refs.table) return false

      return this.$refs.table.selected.length > 0
    }
}

できることは、計算されたプロパティをメソッドに置き換えることです。これは正しく機能するはずです。

<button :disabled="!anySelected()">Test</button>

methods: {
    anySelected () {
      if (!this.$refs.table) return false

      return this.$refs.table.selected.length > 0
    }
}

いくつかのデータをpropに渡す必要がある私のような他のユーザーのために、私はdata代わりに使用しましたcomputed

Vue.component('my-component', {
    data(){
        return {
            myProp: null
        }
    },    
    mounted(){
        this.myProp= 'hello'    
        //$refs is available              
        // this.myProp is reactive, bind will work to property
    }
})

必要に応じて、プロパティバインディングを使用します。：disabled propは、この場合はリアクティブです

<button :disabled="$refs.email ? $refs.email.$v.$invalid : true">Login</button>

しかし、2つのフィールドをチェックするために、ダミーの方法として他の方法は見つかりませんでした。

<button
    :disabled="$refs.password ? checkIsValid($refs.email.$v.$invalid, $refs.password.$v.$invalid) : true">
            {{data.submitButton.value}}
</button>

methods: {
   checkIsValid(email, password) {
      return email || password;
   }
}

私も同様の状況にあり、次の方法で修正しました。

  data: () => {
   return { 
    foo: null,
   }, // data

そして、変数を監視します。

    watch: {
     foo: function() {
       if(this.$refs)
        this.myVideo = this.$refs.webcam.$el;
       return null;
      },
    } // watch

お知らせifのexistanceを評価しているthis.$refsし、それはあなたがあなたのデータを取得変更したとき。