为什么这会返回一个空数组？

Question

我有许多组件的父组件，我通过单击元素在它们之间切换。这些文件是 Vue 文件。

我想要的是在使用组件时让它们处于活动状态。

例如：

当我从导航栏中单击主页时，组件会切换到主页的组件（已经完成）并使其具有边框，以便将其标记为活动组件（有人说是活动选项卡）

我想通过以下步骤做到这一点：

首先）我得到所有元素的集合

第二）我通过使用过滤器保留具有 class= 当前数据（这是我用来在它们之间切换的数据）的元素。应该只有一项是活动的。

第三）将 CSS 样式应用于该元素...等

这是父组件的代码（顺便说一句，我削减了 CSS 样式以使其更短）：

<template>
  <div id="grid">
    <nav id="navbar">

      <ul id="nav">
        <a href="#" class="Home" @click="current = 'Home'" ><li>{{navbar.Home}}</li></a>        
        <a href="#" class="Reservation" @click="current = 'Reservation'" ><li>{{navbar.Reservation}}</li></a>
        <a href="#" class="About-us" @click="current = 'About-us'" ><li>{{navbar.About}}</li></a>
        <a href="#" class="Contact" @click="current = 'Contact'" ><li>{{navbar.Contact}}</li></a>
      </ul>

      <div class="button"> <!-- Make some animation of this button becomes an extendable window of singing up. Don't forget  -->
        <a href="#">Sign Up
        </a>
      </div>
      <img src="https://i.pinimg.com/564x/8b/fa/5d/8bfa5d6a52a03e83b995fec69a4d8c2c.jpg" alt="" id="logo">
    </nav>      

    <main id="content"> 
      <keep-alive>
        <transition name="component-fade" mode="out-in">
          <component v-bind:is="current"></component>    
        </transition>      
      </keep-alive>        
    </main>      

    <footer>
      <p>Copyright © All Rights Reserved</p>
    </footer>
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Aboutus from "./components/About us.vue";
import Contact from "./components/Contact.vue";
import Reservation from "./components/Reservation.vue";
import Signup from "./components/Signup.vue";

export default {
  components: {
    Home: Home,
    "About-us": Aboutus,
    Contact: Contact,
    Reservation: Reservation,
    Signup: Signup
  },
  data() {
    return {
      navbar: {
        Home: "Home",
        Reservation: "Reservation",
        About: "About us",
        Contact: "Contact"
      },
      current: "Home"
    };
  },
  methods: {}
};
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;";
</script>

问题是数组返回空并且样式不适用。有什么帮助吗？

Answer 1

同样的问题。使用 Vue 模板和脚本，您正在编写虚拟 DOM。 Vue 只是无法按您期望的方式工作。试试这个：

...
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;";
  }
};

现在您的数组将不为空。但是你实现了……什么都没有。 Vue 不知道您更改了浏览器 DOM，并且您的更改将在下一次 DOM 修补时丢失。对不起兄弟，你只是不明白 Vue 的想法。你必须了解更多关于 Vue 的原则。