Hesaplanan bir mülkte $ ref kullanma

$refsBilgisayarlı içeriye nasıl erişirim? Hesaplanan özellik ilk çalıştırıldığında her zaman tanımsızdır.

Burada kendi sorumu cevaplayacak olursam, başka hiçbir yerde tatmin edici bir cevap bulamadım. Bazen bazı hesaplamalar yapmak için sadece bir dom öğesine erişmeniz gerekir. Umarım bu başkalarına yardımcı olur.

Bileşen monte edildikten sonra hesaplanan özelliği güncellemesi için Vue'yu kandırmak zorunda kaldım.

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

Vue js kılavuzundan alıntı yapmanın önemli olduğunu düşünüyorum :

$ referanslar yalnızca bileşen oluşturulduktan sonra doldurulur ve reaktif değildirler. Bu sadece doğrudan çocuk manipülasyonu için bir kaçış yolu olarak düşünülmüştür - şablonlar veya hesaplanan özellikler içinden $ refs'e erişimden kaçınmalısınız.

Bu nedenle, her zaman yolunuzu kesebilmenize rağmen, yapmanız gereken bir şey değildir.

Eğer gerekirse $refsbir sonraki v-ifsen kullanabilirsiniz updated() kanca.

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


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

Sadece aynı problemle geldim ve bunun, hesaplanan özelliklerin çalışmayacağı bir durum olduğunu fark ettim.

Mevcut belgelere göre ( https://vuejs.org/v2/guide/computed.html ):

"[...] Hesaplanan bir özellik yerine, aynı işlevi bir yöntem olarak tanımlayabiliriz. Son sonuç için, iki yaklaşım aslında tamamen aynıdır. Ancak, fark, hesaplanan özelliklerin reaktiflerine göre önbelleğe alınmasıdır. bağımlılıklar. Hesaplanan bir mülk, yalnızca reaktif bağımlılıklarından bazıları değiştiğinde yeniden değerlendirilir "

Dolayısıyla, bu durumlarda (muhtemelen) olan şey, bileşenin monte edilmiş yaşam döngüsünü bitirmenin ve referansları ayarlamanın, hesaplanan özelliğin bağımlılıklarında reaktif bir değişiklik olarak sayılmamasıdır.

Örneğin benim durumumda ref tablomda seçili satır olmadığında devre dışı bırakılması gereken bir düğme var. Yani bu kod çalışmayacak:

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

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

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

Yapabileceğiniz şey, hesaplanan özelliği bir yöntemle değiştirmektir ve bu düzgün çalışmalıdır:

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

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

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

Benim gibi bazı verileri desteklemesi gereken diğer kullanıcılar için, databunun yerine kullandımcomputed

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

İsterseniz özellik bağlamayı kullanın. : devre dışı pervane bu durumda reaktiftir

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

Ancak iki alanı kontrol etmek için kukla yöntem olarak başka bir yol bulamadım:

<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;
   }
}

Ben de benzer bir durumdaydım ve bunu şu şekilde düzelttim:

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

Ve sonra değişkeni izlersiniz:

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

Dikkat ifvarlığını değerlendirir this.$refsve onu değiştirir verilerinizi olsun.