web-dev-qa-db-fra.com

Utilisez plutôt une donnée ou une propriété calculée en fonction de la valeur de l'accessoire. Vue JS

Eh bien, j'essaie de changer une valeur de "variable" dans Vue, mais quand je clique sur le bouton, ils lancent un message dans la console:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "menuOpen"

Je ne sais pas comment résoudre ce problème ...

Mon fichier.vue:

<template>
  <button v-on:click="changeValue()">ALTERAR</button>
</template>

<script>

export default {
  name: 'layout',
  props: [ 'menuOpen' ],
  methods: {
    changeValue: function () {
      this.menuOpen = !this.menuOpen
    }
  },
}

</script>

Est-ce que quelqu'un peut m'aider? Merci

javascriptvue.jsvuejs2vue-component
10
Bruno Henrique Drey Seco

L'avertissement est assez clair. Dans votre méthode changeValue, vous modifiez la valeur de la propriété, menuOpen. Cela changera la valeur en interne au composant, mais si le composant parent doit être restitué pour une raison quelconque, alors quelle que soit la valeur à l'intérieur le composant sera remplacé par l'état actuel extérieur le composant.

Généralement, vous gérez cela en faisant une copie de la valeur pour un usage interne.

export default {
  name: 'layout',
  props: [ 'menuOpen' ],
  data(){
      return {
          isOpen: this.menuOpen
      }
  },
  methods: {
    changeValue: function () {
      this.isOpen= !this.isOpen
    }
  },
}

Si vous devez communiquer la modification de la valeur au parent, vous devez $emit le changement.

changeValue: function () {
    this.isOpen= !this.isOpen
    this.$emit('menu-open', this.isOpen)
}
18
Bert