如何使用 Vue.js 对象访问更多节点？答案

【问题标题】：How to acces further node with Vue.js objects?如何使用 Vue.js 对象访问更多节点？
【发布时间】：2017-12-13 11:33:32
【问题描述】：

所以我通过此代码获得以下对象：this.$refs.modal.$el。

但是我想更进一步，得到firstElementChild

但它返回给我一个空节点。

可能是该元素尚未创建吗？有什么办法可以等待吗？

我发现我可以访问this.$refs.modal.$el.childNodes 但我无法访问this.$refs.modal.$el.childNodes[Ø] 这可能是什么意思？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

你试过用 this.$refs.modal.$el.childNodes.item(0) 吗？

(https://developer.mozilla.org/en-US/docs/Web/API/NodeList/item)

【讨论】：

【解决方案2】：

您的问题的另一种解决方案是向您的子元素添加 ref 属性。

【讨论】：

【解决方案3】：

好的，问题是该元素尚未在 DOM 中生成。

所以要正确收听，您只需使用$nextTick

        makeVisible() {
            this.$refs.modal.visible = true
            this.$nextTick(function() {
                if (this.$refs.modal.$el.firstChild.clientHeight > window.innerHeight) {
                    this.$refs.modal.$el.firstChild.style.height = "90%"
                    this.$refs.modal.$el.firstChild.style.overflowY = "scroll"
                }
            })
        },

【讨论】：