我有许多组件的父组件,我通过单击元素在它们之间切换。这些文件是 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/