Implementing dynamic components in Vuejs by passing props from objects

Question

Implementing dynamic components in Vuejs by passing props from objects

I have developed a dashboard application that allows users to customize their dashboard by adding widgets in any order. While the functionality is working fine, I am looking to address some technical debt and clean up the code.

Let's simplify things by considering a dashboard that can display two widgets: Clock and Weather. These widgets require data from the dashboard record and can be arranged in any order on the page.

The current setup includes:

data () {
    return {
      widget1: 'Clock',
      widget2: 'Weather',
      widgetData: {
        weather: {
          long: '12.23.34',
          lat: '23.34.45'
        },
        Clock: {
          timeFormat: '24Hour',
          dateFormat: 'US'
         }
      }
    }
}

For rendering them in the HTML:

<component v-bind:is="this.widget1" :widgetData="widgetData"></component>

<component v-bind:is="this.widget2" :widgetData="widgetData"></component>

Now, I want to achieve the following:

<!-- if this.widget1 is Clock then :widgetData should equal widgetData.Clock -->

<component v-bind:is="this.widget1" :widgetData="widgetData.this.widget1"></component>

<!-- if this.widget2 is Weather then :widgetData should equal widgetData.Weather -->

<component v-bind:is="this.widget2" :widgetData="widgetData.this.widget2"></component>

This way, this.widget1 will fill both the :is attribute and navigate into the :widgetData object without passing the entire object to each component.

While my example focuses on two widgets, a real-world scenario could involve up to nine widgets.

I have tried various approaches like:

:widgetData="widgetData.{{this.widget1}}"
:widgetData="widgetData.${this.widget1}"

Any suggestions?

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

If you're looking for a solution, consider implementing a function that can take the widget type as input and provide the desired data in return.

:widgetData="getWidgetData(this.widget1)"

...

method: {
  getWidgetData(widgetType) {
    if (widgetType == "Clock") {
      return clockData;
    }
    if (widgetType == "Weather") {
      return weatherData;
    }
  }
}

This approach will be particularly beneficial as your system grows more complex than just a simple array structure.

Answer 2

If you're looking for a solution, consider implementing a function that can take the widget type as input and provide the desired data in return.

:widgetData="getWidgetData(this.widget1)"

...

method: {
  getWidgetData(widgetType) {
    if (widgetType == "Clock") {
      return clockData;
    }
    if (widgetType == "Weather") {
      return weatherData;
    }
  }
}

This approach will be particularly beneficial as your system grows more complex than just a simple array structure.

Answer 3

Answer №2

Feeling content with manually coding the numerical values:

:widgetData="widgetData[widget1]"

and similar tasks

Answer 4

Feeling content with manually coding the numerical values:

:widgetData="widgetData[widget1]"

and similar tasks

Answer 5

Answer №3

Personally, I would approach this situation with a slight adjustment. Instead of directly calling the widget component for each instance, I recommend utilizing the object you have created. For example:

data () {
    return {
      widgetData: {
        Weather: {
          long: '12.23.34',
          lat: '23.34.45'
        },
        Clock: {
          timeFormat: '24Hour',
          dateFormat: 'US'
         }
      }
    }
}

In this setup, the keys in your object represent the widget type and the values hold the corresponding data. You can then loop through this object like so:

<div v-for="(value, key) in widgetData">
  <component :is="key" :widgetData="value" />
</div>

If you prefer to skip the wrapper div, you could also use the component directly:

<component v-for="(value, key) in widgetData" :is="key" :widgetData="value" />

-- If adjusting the order is a requirement, you might want to tweak your data structure slightly. By using an array where the index indicates the desired order of widgets:

data () {
    return {
      widgetData: [
       { type: "Weather",
         data: {
          long: '12.23.34',
          lat: '23.34.45'
        },
        { type: "Clock",
          data: {
          timeFormat: '24Hour',
          dateFormat: 'US'
         }
      }
    ]
}

In this scenario, the component binding would look something like this:

<component v-for="widget in widgetData" :is="widget.type" :widgetData="widget.data" />

Answer 6

Personally, I would approach this situation with a slight adjustment. Instead of directly calling the widget component for each instance, I recommend utilizing the object you have created. For example:

data () {
    return {
      widgetData: {
        Weather: {
          long: '12.23.34',
          lat: '23.34.45'
        },
        Clock: {
          timeFormat: '24Hour',
          dateFormat: 'US'
         }
      }
    }
}

In this setup, the keys in your object represent the widget type and the values hold the corresponding data. You can then loop through this object like so:

<div v-for="(value, key) in widgetData">
  <component :is="key" :widgetData="value" />
</div>

If you prefer to skip the wrapper div, you could also use the component directly:

<component v-for="(value, key) in widgetData" :is="key" :widgetData="value" />

-- If adjusting the order is a requirement, you might want to tweak your data structure slightly. By using an array where the index indicates the desired order of widgets:

data () {
    return {
      widgetData: [
       { type: "Weather",
         data: {
          long: '12.23.34',
          lat: '23.34.45'
        },
        { type: "Clock",
          data: {
          timeFormat: '24Hour',
          dateFormat: 'US'
         }
      }
    ]
}

In this scenario, the component binding would look something like this:

<component v-for="widget in widgetData" :is="widget.type" :widgetData="widget.data" />

Implementing dynamic components in Vuejs by passing props from objects

Answer №1

Answer №2

Answer №3

Similar questions

The technique for handling intricate calls in node.js

Programming the tab pages within Chrome

Storing property data outside of the render method in ReactJS is key for efficient

Is there a way to duplicate an image a specified number of times depending on a given output value?

I am receiving an undefined response from Cheerio when attempting to fetch JSON data

A Nuxt plugin that integrates a separate website into the serverMiddleware

HTML pages are free from any visible banner ads

Determining the top element displayed in a div: A guide

Enhance your Sails.js model by incorporating a custom instance method as a new property

Generating React components dynamically can bring flexibility and efficiency to the

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently

Modifying arrays in ReactJS

Stop angular schema form's destroyStrategy from deleting any data

Using Vuejs to dynamically render a select dropdown based on the initial selection made in the first dropdown menu

Tips for transferring information from a parent to a child controller in Angular using the $broadcast method?

When the parent component in React JS rerenders, the props are not automatically passed down to the child

Sustain unbroken websocket connection with Discord using Node.js

Get only the text content from a hyperlink using Tinymce-4

React does not accept objects as valid children. If you want to render a group of children, make sure to use an array instead

Error: It is not possible to access the 'map' property of an undefined value 0.1