[Vuejs]-How do I style a component within a view?

by

1👍

✅

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>
👤Bruce

Leave a comment