Why variables created with querySelector(All) are empty?

Question

In the Vue data object there are the following variables defined:

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

Then, there is this showData() method, in the very same Vue object:

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

When the method above is called from mounted() hook, it gives: ReferenceError: nameDisplay is not defined at VueComponent.showData. The error appears in case of nameDisplay and sails variables, so the ones assigned with document.querySelector(All) methods. Calling them with this only gives empty array/value.

Why is it so? How to define variables to have them accessible?

data is returning an object, and it looks like you're expecting variables called sails, sailsGroup to be defined instead of someObject.sails, someObject.sailsGroup, etc. — James, Jun 06 '17 at 20:09
@RoyJ: it gives "null" for nameDisplay and an empty array for sails. — AbreQueVoy, Jun 06 '17 at 20:14
@AbreQueVoy Are you calling `data()` before the DOM is loaded? — Barmar, Jun 06 '17 at 20:28
@Barmar: the DOM should have been loaded when "mounted()" hook gets triggered, right? Besides, all of the DOM elements are defined above the script location in my template. — AbreQueVoy, Jun 06 '17 at 20:33

score 1 · Accepted Answer · answered Jun 06 '17 at 21:00

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

This references variables in some outer scope. But if those are actually attributes you set up in data, then you need to use this.name instead:

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

Note that if those elements are elements that are inside the Vue component’s template, then it’s unlikely that you will find any elements since the component (and its data) is constructed before the component is actually mounted to the DOM. So the querySelectorAll calls run before the component is rendered.

In that case, you should either initialize the data later (once the component has been mounted), or use component refs instead.

Why variables created with querySelector(All) are empty?

1 Answers1