What is the best way to customize a component in a view?

<template>
  <div class="about">
    <Header />
    <h1>Welcome to the dashboard page</h1>
  </div>
</template>

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

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

I have added the header component and am looking to dynamically change the active state of a menu item based on the user's current view. Any suggestions on how I can achieve this?

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>
javascriptcssvue.js

Answer №1

To start off, we connect the view to the Header in your dashboard file, allowing the header to receive the current view.

<Header view="dashboard" />

Next, we need to inform your header file which property it should be receiving by setting props within the <script> tags.
You can use the value of view within the <template> to apply a class or style accordingly.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which symbol or character corresponds to the public "get symbol" method?

While going through some Typescript code, I came across a line that is giving me trouble to understand. const symbol = Symbol.for('symbolname'); class Something { public get [symbol]() { return true; } ... } I am confused abou ...

javascripttypescript

Customize the appearance of the date input box in MUI KeyboardDatePicker

Currently, I am attempting to customize the appearance of the KeyboardDatePicker component including board color, size, font, and padding. However, none of the methods I have tried seem to be effective. Here is what I have attempted so far: 1 . Utilizing ...

cssreactjsdatematerial-uistyles

Issue arising when attempting to dynamically load an image using Vue and Webpack

I recently set up an application using the Vue CLI, and within one of my components, I have included the following code snippet: <template> <div v-loading="loading"> <el-carousel :interval="4000" type="card" height="350px"> & ...

javascriptvue.jswebpackvuejs2vue-cli

Transforming Adobe Animate CC into a customized Vue.js component

Can someone share the optimal method for integrating published Adobe Animate CC HTML5 canvas / JS files into a Vue.js component? Appreciate it ...

vue.jsadobevue-componentanimate-cc

I'm looking for assistance on how to execute a render right after making a put or delete request

class ProductApp extends Component { constructor() { super(); this.state = { currentProduct: null, items: [], }; this.handleUpdateSubmit= this.handleUpdateSubmit.bind(this); } componentDidMount() { axios.get('h ...

javascriptruby-on-railsreactjs

Switch over to TypeScript - combining Socket.IO, Angular, and Node.js

This is the code I'm using for my node server: import http from 'http'; import Debug from 'debug'; import socketio, { Server } from 'socket.io'; import app from './app'; import ServerGlobal from './serve ...

javascriptnode.jsangulartypescriptsocket.io

Attempting to use express and nodemailer to send an email, but there is absolutely no output appearing in either the console or the terminal

When I click the send email button, it should send the data to a mailhog inbox. However, nothing happens - no errors in the console or terminal. My goal is to use nodemailer to send the name, email, chosen plan, and message from the form to the mailhog add ...

javascriptnode.jsexpressnodemailermailhog

Running a child process within a React application

I'm currently in search of the best module to use for running a child process from within a React application. Here's what I need: I want a button that, when clicked, will execute "npm test" for my application and generate a report that can be r ...

javascriptreactjsnpmchild-process

What is the best way to access a promise's value in global scope within a reactjs application?

Currently tackling user authentication using web tokens in react. My approach involves utilizing the fetch() method to send a POST request to my backend, facilitating CORS. The issue arises when attempting to employ the setToken() hook within the .then() b ...

javascriptreactjs

Instructions on adjusting the image size within a MUI Card

import { Card, CardActionArea, CardContent, CardMedia, Typography, } from "@mui/material"; import React from "react"; import { styled } from "@mui/material/styles"; const CardImage = styled("div")(({ theme ...

javascriptreactjsmaterial-uiresponsivecard

Vue lightweight loading CSS error: "Undefined property 'denominator'"

Within my project, I have a style.less file that I am loading in the following manner: import "./styles/styles.less"; The contents of the file are structured as shown below. I had to encapsulate the styles to prevent them from affecting the rest of the p ...

twitter-bootstrapvue.jsnpmvue-cli

Using RabbitMQ in a Node.js application to illustrate an example of header exchange

I've been on a quest to find an example of using RabbitMQ with Node.js for a headers exchange. If anyone could guide me in the right direction, I would greatly appreciate it. Here's what I've managed to put together so far: The publisher me ...

javascriptnode.jsexpressrabbitmqamqp

Unable to bind click eventListener to dynamic HTML in Angular 12 module

I am facing an issue with click binding on dynamic HTML. I attempted using the setTimeout function, but the click event is not binding to the button. Additionally, I tried using template reference on the button and obtaining the value with @ViewChildren, h ...

javascriptnode.jsangular

Use CSS bracket attribute to conceal link with no HTML access

I am unable to modify the HTML code, but I need to find a way to hide the link (#wall). <td class="status_value"><span class="online"> - <a href="#wall"> Leave a Comment </a> <a href="#today"> ...

htmlcss

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

Currently, I am utilizing rulerguides.js in my project. I have customized it for a specific div to display rulers and grid lines. You can refer to this FIDDLE. The rulers are functioning properly, but the draggable grid lines are being calculated based on ...

javascriptjqueryhtmlgridlinesrulers

Showing the number of times a button has been pressed

I have written some HTML code to create a button and now I am looking for guidance on how I can use Vue.js to track how many times the button has been clicked. Here is what I have so far: <div class="123"> <button id = "Abutton&q ...

javascripthtmlvue.jsbutton

Tips for passing mapped data as props to a different component in a React application

I am trying to pass mapped data as props to another component. The code I have written is as follows: <div className={styles.myTeamFlex}> {userTeams.map((team, index) => ( <TeamCard key={team + index} active={active} in ...

javascriptreactjsreact-hooksnext.js

Keeping your Contact Form 7 perfectly centered on your WordPress website

Currently, I am utilizing the contact form 7 plugin on my Wordpress website. While I have two forms set up, I only want to center align one of them. To achieve this, I initially added the following CSS code in my additional CSS: div.wpcf7 { text-align: c ...

csswordpress

What is the purpose of returning a function in a React Hook?

Currently, I am incorporating Material-UI components into my project and have implemented the AutoComplete component in my application. While exploring an example provided by the Material-UI team, I stumbled upon a fascinating instance of using Ajax data ...

javascriptreactjsmaterial-ui

Using javascript to store HTML tags in a variable

Hey there, I have a quick question. Can someone help me figure out why this code isn't working? let plus = "+" + '<h1>'+"This is a heading"+'</h1>'; When I run the code, the output I get is: +<h1 ...

javascripthtmlstringvariablesconcatenation