Sử dụng $ refs trong một thuộc tính được tính toán

Làm cách nào để truy cập $refsbên trong máy tính? Nó luôn không xác định lần đầu tiên thuộc tính được tính toán được chạy.

Đi trả lời câu hỏi của chính mình đến đây, tôi không tìm được câu trả lời thỏa đáng ở đâu khác. Đôi khi bạn chỉ cần truy cập vào một phần tử dom để thực hiện một số phép tính. Hy vọng rằng điều này là hữu ích cho những người khác.

Tôi đã phải lừa Vue cập nhật thuộc tính đã tính khi thành phần được gắn kết.

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

Tôi nghĩ điều quan trọng là phải trích dẫn hướng dẫn Vue js :

$ refs chỉ được điền sau khi thành phần đã được hiển thị và chúng không phản ứng. Nó chỉ có nghĩa là một lối thoát cho thao tác trực tiếp với trẻ em - bạn nên tránh truy cập $ refs từ bên trong các mẫu hoặc thuộc tính được tính toán.

Do đó, đó không phải là điều bạn phải làm, mặc dù bạn luôn có thể vượt qua nó.

Nếu bạn cần $refssau một, v-ifbạn có thể sử dụng updated() hook.

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


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

Tôi vừa gặp vấn đề tương tự này và nhận ra rằng đây là loại tình huống mà các thuộc tính được tính toán sẽ không hoạt động.

Theo tài liệu hiện tại ( https://vuejs.org/v2/guide/computed.html ):

"[...] Thay vì một thuộc tính được tính toán, chúng ta có thể xác định cùng một hàm như một phương thức. Đối với kết quả cuối cùng, hai cách tiếp cận thực sự hoàn toàn giống nhau. Tuy nhiên, sự khác biệt là các thuộc tính được tính toán được lưu vào bộ nhớ cache dựa trên phản ứng của chúng các phụ thuộc. Một thuộc tính được tính toán sẽ chỉ đánh giá lại khi một số phụ thuộc phản ứng của nó đã thay đổi "

Vì vậy, điều (có thể) xảy ra trong những tình huống này là việc hoàn thành vòng đời được gắn kết của thành phần và thiết lập các tham chiếu không được tính là một thay đổi phản ứng trên các phụ thuộc của thuộc tính được tính toán.

Ví dụ, trong trường hợp của tôi, tôi có một nút cần được tắt khi không có hàng được chọn trong bảng tham chiếu của tôi. Vì vậy, mã này sẽ không hoạt động:

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

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

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

Những gì bạn có thể làm là thay thế thuộc tính tính toán thành một phương thức và phương thức đó sẽ hoạt động bình thường:

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

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

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

Đối với những người dùng khác như tôi chỉ cần chuyển một số dữ liệu để hỗ trợ, tôi đã sử dụng datathay vì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
    }
})

Sử dụng ràng buộc tài sản nếu bạn muốn. : prop bị vô hiệu hóa là phản ứng trong trường hợp này

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

Nhưng để kiểm tra hai trường, tôi không tìm thấy cách nào khác là phương pháp giả:

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