1
votes

Initialisation des données d'un objet prop dans un composant Vue

J'ai deux composants Vue, EventTask et EventCard . EventTask a un objet currentEvent dans data , que je passe comme accessoire à EventCard comme si

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: { ...this.currentEvent }
    }
  }
}

Dans EventCard, j'initialise une propriété de données event à partir de la prop currentEvent , comme suggéré dans cette réponse

<event-card :current-event="currentEvent" />

Cependant, pour une raison quelconque, la propriété de données event n'est pas définie correctement. Voici ce que je vois dans les outils de développement Vue

Notez que le prop currentEvent est un objet avec un avec un tas de propriétés, mais la propriété de données event est un objet vide. Pourquoi la propriété data n'est-elle pas initialisée correctement à partir de l'accessoire?

javascript vue.js

3 commentaires

Pouvez-vous partager une simple démo / violon représentant votre scénario, car cela fonctionne dans des cas normaux.

pourquoi avez-vous besoin de créer une autre propriété dans les données? vous pouvez utiliser le même currentEvent (this.currentEvent) dans votre composant EventCard. Une raison spécifique pour créer une autre propriété dans les données ?. L'autre façon consiste à affecter le currentEvent à l'événement (dans les données) dans l'un des cycles de vie, vous pouvez utiliser monté () {this.event = this.currentEvent}

@SowmyadharGourishetty J'ai besoin de créer une autre propriété dans les données car je vais modifier cet objet dans le composant EventCard , mais je ne veux pas que ces modifications se propagent au composant EventTask

3 Réponses :

0
votes

vous pouvez essayer le code ci-dessous

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: null
    }
  },
  mounted () {
    this.event = this.currentEvent // you can also try clone here.
  }
}

0 commentaires

0
votes

Essayez plutôt de le faire comme ceci:

export default {
  name: 'EventCard',
  props: {
    currentEvent: {
      type: Object,
      required: false
    }
  },
  data: function () {
    return {
      event: this.currentEvent
    }
  }
}

Source: https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

2 commentaires

AFAIK, il est recommandé de ne pas faire cela lorsque le prop est un objet ou un tableau (qui sont passés par référence), car les changements dans l'enfant seront également reflétés dans le parent. Source stackoverflow.com/a/40435856/2648

D'accord! Merci pour l'info

2
votes

Cela peut se produire si currentEvent est mis à jour après que EventCard a déjà été initialisé. Notez que data () n'est pas invoqué de manière réactive, donc les modifications apportées à currentEvent ne réinitialisent pas l ' événement .

Une solution consiste à utiliser un observateur sur currentEvent pour le copier dans événement :

export default {
  watch: {
    currentEvent(newValue) {
      this.event = { ...newValue }
    }
  }
}

démo

1 commentaires

Je pense que currentEvent étant mis à jour après l'initialisation de EventCard est exactement le problème. Je ne savais pas que data () n'était invoqué qu'une seule fois, plutôt que de manière réactive.