CODEWITHSUNDEEP
javascriptcssvue.js
Kristaps Lūsis
Kristaps Lūsis

Reputation: 49

How do I style a component within a view?

<template>
  <div class="about">
    <Header />
    <h1>This is the dashboard page</h1>
  </div>
</template>

<script>
import Header from "../components/layout/Header.vue";

export default {
  name: "dashboard",
  components: { Header }
};
</script>

I have imported the header component and want to change the active state of a menu item based on which view the user is in, how do I achieve it?

Snippet from header.vue

 <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item">Dashboard</a>
            <a class="navbar-item">Building Overview</a>
            <a class="navbar-item">Map View</a>
            <a class="navbar-item">Log Out</a>
            <a class="navbar-item">Import</a>
            <a class="navbar-item">Export</a>
          </div>
        </div>

Upvotes: 0

Views: 40

Answers (1)

Bruce
Bruce

Reputation: 129

First, we bind the view to Header in your dashboard-file, so header can recieve the current view.

<Header view="dashboard" />

Then we need to let your header-file know which property to recieve, by setting props inside <script>.
You can check the value of view inside <template> to set a class or add styling.

<template>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-end">
      <a :class="view == 'dashboard' ? 'navbar-item--active' : 'navbar-item'">Dashboard</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ['view']
};
</script>

Upvotes: 1

Related Questions