Évitez de changer un support directement car la valeur sera écrasée chaque fois que le composant parent re-rend

Je suis nouveau sur vuejs et j'essaie de synchroniser les données actives avec les parents mais je me suis trompe

Vue.js: 523 [Vue warn]: Évitez de modifier un support directement car la valeur sera écrasée chaque fois que le composant parent re-rend. Au lieu de cela, utilisez une propriété de données ou calculée en fonction de la valeur du support. Prop étant muté: "actif" (trouvé dans le composant)

Mon Code Vuejs est comme ci-dessous

<div id="app"> <pre> {{$data}} </pre> <div v-for="plan in plans"> <plan :plan="plan" :active.sync="active"></plan> </div> </div> <template id="mytemplate"> <div> {{$data}} <span>{{plan.name}}</span> <span>{{plan.price}}</span> <button @click="setActivePlan">upgrade</button> </div> </template> <script src="vue.js"></script> <script> new Vue({ el: "#app", data: { active:this.active, plans: [ {name: 'Diamond', price: '1000'}, {name: 'Gold', price: '500'}, {name: 'Silver', price: '250'}, {name: 'Free', price: '0'} ] }, components: { plan: { template: "#mytemplate", props: ['plan', 'active'], methods: { setActivePlan: function () { this.active = this.plan } } } } }); </script>

Quelqu'un peut-il m'aider à résoudre ce problème?

J'espère que c'est le problème de la version. Veuillez montrer votre version VUEJS, sinon, obtenez la version du code ci-dessous.

 <div id="app"> <pre> {{$data | json}} </pre> <div v-for="plan in plans"> <plan :plan="plan" :active.sync="active"></plan> </div> </div> <template id="mytemplate"> <div> <span>{{plan.name}}</span> <span>{{plan.price}}</span> <span>a{{plan.active}}</span> <button @click="setActivePlan">upgrade</button> </div> </template> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.js"></script> <script> new Vue({ el: "#app", data: { plans: [ {name: 'Diamond', price: '1000'}, {name: 'Gold', price: '500'}, {name: 'Silver', price: '250'}, {name: 'Free', price: '0'} ], active:{ } }, components: { plan: { template: "#mytemplate", props: ['plan', 'active'], methods: { setActivePlan: function () { this.active = this.plan } } } } }); </script>

Comme l'indique l'erreur, vous essayez de changer l'un des accessoires active .

Prop étant muté: "actif" (trouvé dans le composant)

Comme les accessoires sont envoyés de manière dynamique par les parents, ils changent chaque fois que les parents les modifient, si vous les modifiez également dans l'enfant, il y aura des conflits, c'est pourquoi vous obtenez cette erreur.

Comme par la documentation :

La relation parent-parent d'enfant peut être résumée comme accessoires, événements en hausse. Le parent transmet les données à l'enfant via des accessoires, et l'enfant envoie des messages aux parents via des événements.

Ainsi, la bonne façon de le faire sera d' émettre un événement, qui appellera une méthode parent et modifiera la variable active dans parent où elle est définie. Voici le code change:

 <script src="vue.js"></script> <script> new Vue({ el: "#app", data: { active:this.active, plans: [ {name: 'Diamond', price: '1000'}, {name: 'Gold', price: '500'}, {name: 'Silver', price: '250'}, {name: 'Free', price: '0'} ] }, methods: { setActivePlan: function (plan) { this.active = plan } } components: { plan: { template: "#mytemplate", props: ['plan', 'active'], methods: { setActivePlan: function () { this.$emit('setActivePlan', this.plan) } } } } }); </script>