Question

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

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

例如：

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

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

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

第二）我使用过滤器保留具有class = current data（用于在它们之间进行切换的数据）的元素。应该只有一项是活动项。

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

这是父组件的代码（我削减了CSS样式btw以使其更短）：

<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原理的更多信息。

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

1 个答案: