2
votes

Vuejs passant des accessoires d'un objet à des composants dynamiques

Je crée une application de tableau de bord où quelqu'un peut ajouter n'importe quel widget dans n'importe quel ordre à son tableau de bord. Tout fonctionne mais j'essaye de tuer une dette technique et de nettoyer.

Pour plus de simplicité, disons qu'un tableau de bord peut avoir 2 widgets (horloge et météo). Ces widgets ont besoin de certaines données de l'enregistrement du tableau de bord. Les widgets peuvent être dans n'importe quel ordre sur la page.

Je les inclut comme ça.

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

Puis dans le HTML

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

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

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

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

Maintenant, ce que je veux faire est

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

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

pour que this.widget1 remplisse à la fois le: is et explore l'objet: widgetData afin que je ne passe pas l'objet entier à chaque composant

Mon exemple ne prend en considération que 2 widgets mais en réalité un simple tableau de bord peut en contenir jusqu'à 9.

J'ai essayé à peu près tout, comme

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

etc.

Des idées?

javascript vue.js vue-component vuejs2

0 commentaires

3 Réponses :

1
votes

Si vous êtes satisfait de coder en dur les chiffres numériques:

:widgetData="widgetData[widget1]"

et ainsi de suite

0 commentaires

2
votes

Vous pouvez essayer d'utiliser une fonction qui prendrait le type de widget et retournerait les données souhaitées.

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

...

:widgetData="getWidgetData(this.widget1)"

Ceci s'avérera particulièrement utile si votre boutique devient plus complexe qu'un tableau.

2 commentaires

Cela semble prometteur. Je n'ai construit que 12 widgets mais j'en ai 45 de plus à construire. On dirait que cela pourrait me faire économiser beaucoup de dettes techniques. Je vais tester demain

Fonctionne parfaitement et m'a permis de refactoriser facilement environ 100 lignes de code supplémentaires

1
votes

Donc, si c'était moi, je recadrerais un peu les choses. Plutôt que d'appeler explicitement le composant widget pour chacun, j'utiliserais en fait l'objet que vous avez créé. Étant donné:

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

Étant donné que, vos clés sont les mêmes que votre type de widget et les données sont la valeur. Vous pouvez donc faire ceci:

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

Ou si vous ne voulez pas le div wrapper, vous devriez également pouvoir simplement utiliser le composant:

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

- Si, comme le suggèrent les commentaires, l'ordre est quelque chose qui peut être défini, alors je changerais légèrement votre modèle de données pour accomplir la même chose. Dans ce cas, l'index du widget dans le tableau serait l'ordre dans lequel les widgets entrent:

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

Dans ce cas, la liaison du composant serait comme ceci: p >

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

4 commentaires

Il doit être possible d'afficher les widgets dans n'importe quel ordre. Cela fonctionnerait si vous modifiez votre commande de données à chaque fois.

@whla Ok, je vais faire une mise à jour à ce sujet, merci pour la capture.

Oui, ils doivent être dans n'importe quel ordre et il existe plusieurs mises en page. Une mise en page peut avoir 3 widgets, une autre peut en avoir 12 par exemple. Le placement du widget est imprévisible et basé sur l'endroit où l'utilisateur le place. Je suis assez limité aux données - je dois avoir tous les accessoires de widget dans l'enregistrement du tableau de bord. Pas comme je le souhaiterais, mais ce sont les restrictions auxquelles je fais face. Aussi parce qu'il est dans une grille, un v-for ne fonctionnerait pas sans un piratage majeur

@YestheCia toutes ces exigences devraient vraiment être dans la question.