Question

在Vue data对象中定义了以下变量：

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

然后，在同一个Vue对象中有这个showData()方法：

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

当从mounted()钩子调用上述方法时，它会给出： ReferenceError：在VueComponent.showData 中未定义nameDisplay。如果nameDisplay和sails变量出现错误，那么使用 document.querySelector（All）方法分配的变量就会出现错误。使用 this 调用它们只会得到空数组/值。

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

Answer 1

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）创建的变量是空的？

1 个答案: