javascript - 为什么这会返回一个空数组?

标签 javascript html css vue.js

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

我想要的是让它们在组件被使用时激活。

例如:

当我从导航栏点击 Home 时,该组件切换到 Home 的组件(已经完成)并使其具有边框,以便将其标记为事件组件(有人说是事件标签)

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

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

第二)我通过使用过滤器保留具有 class = current 数据(这是我用来在它们之间切换的数据)的元素。哪个应该只有 1 个元素是事件元素。

第三)将 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>

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

最佳答案

同样的问题。使用 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 原则的知识。

关于javascript - 为什么这会返回一个空数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51748090/

相关文章:

javascript - Zf2 布局 css 和 javascript 路径在子路由上不解析

Javascript 图像加载器

css - 将属性传递给 less 函数

javascript - AS3外部接口(interface): Control a movie from another window

javascript - 悬停不识别图像

css - 线性渐变 Firefox 支持

javascript - 使用 Electron 截取桌面截图

javascript - 合并多个 Node.js API 调用的结果

javascript - 如何清除每次使用文件 uploader 上传文件时的标签消息

html - 将 View 聚焦在背景上