[Vuejs]-Why this returns an empty array?

by

0👍

Same problem. With Vue template and script you are composing virtual DOM. Vue just doesn’t work the way you are expecting. Try this:

...
export default {
  ...
  data() {
    return {
      navbar: {
        Home: "Home",
        Reservation: "Reservation",
        About: "About us",
        Contact: "Contact"
      },
      current: "Home"
    };
  },
  methods: {},
  // this method, lifecycle hook, is executed
  // after the Browser DOM is patched with
  // Virtual DOM you composed from template
  mounted () {
    let nodlist = document.getElementsByTagName("a");
    console.log(nodlist);
    let active = Array.from(nodlist).filter(
      element => element.className == this.data.current
    );
    console.log(active);
    active.cssText = "border-bottom: 5px solid #5fb0e4;";
  }
};

Now your array will be not empty. But you achieved … nothing. Vue have no idea you changed the Browser DOM and your changes will be lost with next DOM patching. Sorry bro, you just don’t get the Vue idea. You have to learn more about Vue principles.

Leave a comment