web-dev-qa-db-fra.com

Est-il possible de changer la valeur des accessoires de la méthode dans le composant Vue?

J'ai un composant et je passe la valeur 543 aux accessoires: prop-room-selected,

<navigation-form :prop-room-selected='543'>
</navigation-form>

Maintenant, à partir d'un clic sur un bouton, j'appelle la fonction updateCoachStatus pour changer la valeur de propRoomSelected, mais la valeur des accessoires ne se met pas à jour.

{
    template: '#navigation-form',
    props: ['propRoomSelected'],
    data: function () {
      return {
        roomSelected: this.propRoomSelected,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.propRoomSelected = 67;
      }
  }
}

Je ne sais pas comment changer la valeur des accessoires de la fonction. Est-il possible dans Vue de mettre à jour la valeur des accessoires ??

laravellaravel-5.3vuejs2vue-component
11
Rubanraj Ravichandran

Ce que vous faites lancera un avertissement dans Vue (dans la console).

[Vue warn]: évitez de muter directement un accessoire car la valeur sera écrasée chaque fois que le composant parent sera rendu. Utilisez plutôt une donnée ou une propriété calculée en fonction de la valeur de l'accessoire. Accessoire en mutation: "propRoomSelected"

La valeur changera réellement à l'intérieur du composant, mais pas à l'extérieur du composant . La valeur d'une propriété parent ne peut pas être modifiée à l'intérieur d'un composant et, en fait, la valeur mise à jour sera perdue si le parent effectue un nouveau rendu pour tout raison.

Pour mettre à jour la propriété parent, ce que vous devez faire est $emit la valeur mise à jour et écoutez le changement dans le parent.

Vue.component("navigation-form",{
    template: '#navigation-form',
    props: ['propRoomSelected'],
    data: function () {
      return {
        roomSelected: this.propRoomSelected,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.$emit("update-room-selected", 67) ;
      }
  }
})

Et dans votre modèle parent, écoutez l'événement

<navigation-form :prop-room-selected='propRoomSelected'
                 @update-room-selected="onUpdatePropRoomSelected">
</navigation-form>

Voici un exemple .

Il s'agit d'un modèle courant et Vue a implémenté une directive pour le rendre un peu plus facile appelée v-model. Voici un composant qui prend en charge v-model cela fera la même chose.

Vue.component("navigation-form-two",{
    template: '#navigation-form-two',
    props: ['value'],
    data: function () {
      return {
        roomSelected: this.value,
      }
  },
  methods:{
      updateCoachStatus: function(event){
         this.$emit("input", 67) ;
      }
  }
})

Et dans le modèle parent

<navigation-form-two v-model="secondRoomSelected">

Essentiellement, pour que votre composant prenne en charge v-model vous devez accepter une propriété value et $emit l'événement input. L'exemple lié ci-dessus montre également que cela fonctionne.

15
Bert