Setting Vuetify component props dynamically depending on certain conditions

Question

Setting Vuetify component props dynamically depending on certain conditions

I've implemented a navbar component in my web app using the v-app-bar Vuetify component. However, I'm facing an issue where I need to dynamically set the props of the v-app-bar based on the current page the user is viewing.

<v-app-bar
  absolute
  color="#43a047"
  dark
  shrink-on-scroll
  prominent
  src="https://picsum.photos/1920/1080?random"
  fade-img-on-scroll
  scroll-target="#scrolling-techniques-5"
  scroll-threshold="500"
>

For example, the code snippet above showcases a standard v-app-bar component with props that allow for an image background which fades and shrinks as the user scrolls down. This design is specifically intended for the landing page. I'd like to have a unique style for the navbar when users navigate to other pages on the site. While I've experimented with creating separate navbar components or using v-if statements within the component to handle this, it has led to code duplication and inefficiency. Given that I am working on a large-scale website with diverse user accounts, it would be much more convenient if I could dynamically adjust the Vuetify props of the v-app-bar based on the specific page being viewed rather than creating multiple variations of the navbar component.

javascript vue.js vue-component vuetify.js nuxt.js

Answer 1

Answer №1

If you are utilizing the v-app-bar in your layout, it seems that directly accessing the route using this.$route may not be the most efficient approach due to the need for conditional statements or a cumbersome switch statement.

In Nuxt, each route is associated with a specific page file where details can be defined and passed to the layout as props for the v-app-bar component. One way to achieve this is by utilizing an event bus. I have previously explained its usage in another answer found here, but I can provide a summary of how to implement it in this scenario.

It appears that you intend to customize the navigation bar by passing props such as color, image source, scroll target, etc., from your page. The following example demonstrates how you can pass these props:

//index.vue -- or any route 

export default {
  mounted() {
      let props = {
        color: '#43a047',
        src: 'https://picsum.photos/1920/1080?random',
        scroll-target: '#scrolling-techniques-5',
        scroll-threshold: 500
      }
      this.$nuxt.$emit('appBarProps', props);
  }
}

To receive the emitted data from the event bus in your layout, you can listen for it like this:

//default.vue

created() {
    this.$nuxt.$on('appBarProps', p => {
      this.appBarProps = p;
      })
    },

data() {
    return {
      appBarProps: {}
    } 
}

beforeDestroy() {
    this.$nuxt.$off('appBarProps');
},

Finally, utilize the received appBarProps object within your v-app-bar component for customization.

Answer 2

If you are utilizing the v-app-bar in your layout, it seems that directly accessing the route using this.$route may not be the most efficient approach due to the need for conditional statements or a cumbersome switch statement.

In Nuxt, each route is associated with a specific page file where details can be defined and passed to the layout as props for the v-app-bar component. One way to achieve this is by utilizing an event bus. I have previously explained its usage in another answer found here, but I can provide a summary of how to implement it in this scenario.

It appears that you intend to customize the navigation bar by passing props such as color, image source, scroll target, etc., from your page. The following example demonstrates how you can pass these props:

//index.vue -- or any route 

export default {
  mounted() {
      let props = {
        color: '#43a047',
        src: 'https://picsum.photos/1920/1080?random',
        scroll-target: '#scrolling-techniques-5',
        scroll-threshold: 500
      }
      this.$nuxt.$emit('appBarProps', props);
  }
}

To receive the emitted data from the event bus in your layout, you can listen for it like this:

//default.vue

created() {
    this.$nuxt.$on('appBarProps', p => {
      this.appBarProps = p;
      })
    },

data() {
    return {
      appBarProps: {}
    } 
}

beforeDestroy() {
    this.$nuxt.$off('appBarProps');
},

Finally, utilize the received appBarProps object within your v-app-bar component for customization.

Setting Vuetify component props dynamically depending on certain conditions

Answer №1

Similar questions

Encountering parameter issues while working with Google Maps React in TypeScript

Retrieving a specific object from a subarray using MongoDB's ID

What is the best way to align the variables in this JavaScript file with the variables in Flask/Python?

A plethora of unhandled DOMException errors found in a basic Vue.js application

A guide to integrating gatsby-remark-images-grid in markdown with Gatsby.js

Jquery adds a fun, wobbly effect to animations

Troubleshooting Vue v-for loop triggering click events on multiple items simultaneously

In my chat application, I encountered the error message "Received an expression instead of an assignment or function call - no-unused-expressions"

Set the value of an input without using v-model or any form of data binding

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

What is the process for customizing the appearance of a prop within the <TextField> component?

The JavaScript code appears to have malfunctioned as it abruptly terminates with an exit code of 1

Automatically assigning IDs to all elements on an Angular webpage

Is it necessary to include Babel when integrating Webpack?

Typescript method fails to compile due to an indexing error

Using jQuery to create tabs and display or hide tab-like content

How to display and download a PDF file on a JSP web page

Is there a way to retrieve the content of an element using JavaScript?

What is the best way to reference an ImageButton using jquery?

When clicking on the file input field in Angular.js, the image name mysteriously disappears