为什么使用querySelector（All）创建的变量为空？

问题描述：

在Vue的data对象有下列变量定义：为什么使用querySelector（All）创建的变量为空？

data: function() { 
    return { 
     sails: document.querySelectorAll('.sail'), 
     sailsGroup: document.getElementsByClassName("sail"), 
     nameDisplay: document.querySelector('#name'), 
     lines: document.getElementById("lines"), 
     texts: document.getElementById("texts") 
    } 
    }, 
(...)

然后，有此showData()方法，在非常相同的Vue对象：

showData() { 
    console.log(sails); 
    console.log(sailsGroup); 
    console.log(nameDisplay); 
    console.log(lines); 
    console.log(texts); 
}, 
(...)

当上面的方法是从称为mounted()挂钩，它给出：ReferenceError：nameDisplay没有在VueComponent.showData处定义。如果出现nameDisplay和sails变量，则会出现错误，因此将使用document.querySelector（全部）方法指定的变量。用调用它们，这个只给出空的数组/值。

这是为什么？如何定义变量以使其可访问？

请显示你的标记 –

数据正在返回一个对象，它看起来像你期待的变量称为帆，sailsGroup被定义，而不是someObject.sails，someObject.sailsGroup等 – James

使用'this.nameDisplay'而不是只是'nameDisplay'。 –

答

showData() { 
    console.log(sails); 
    console.log(sailsGroup); 
    console.log(nameDisplay); 
    console.log(lines); 
    console.log(texts); 
},

这引用了一些外部范围中的变量。但是，如果这些实际上是属性您将在data，那么你需要使用this.name代替：

showData() { 
    console.log(this.sails); 
    console.log(this.sailsGroup); 
    console.log(this.nameDisplay); 
    console.log(this.lines); 
    console.log(this.texts); 
},

注意，如果这些元素是在Vue的组件模板中的元素，那么它是不可能的，你会发现任何因为组件（及其数据）是在组件实际安装到DOM之前构建的。因此querySelectorAll调用在组件呈现之前运行。

在这种情况下，您应该稍后初始化数据（一旦组件已装入）或使用component refs代替。

为什么使用querySelector（All）创建的变量为空？

相关推荐