Vue.js “Maximale de la pile d'appels de taille dépassait d'erreur”. Le passage des données d'un parent à l'enfant, à défaut de
Je ne peux pas passer des données d'un parent à un enfant. Je suis en utilisant des accessoires, ont essayé de retourner les données en tant que bien, pas de chance. J'ai un composant du panneau (ce qui est le parent) avec des données et des panelBody (enfants)
Panneau est comme suit:
<template>
<div id="panel">
<div class="panel">
<ul>
<li v-for="shelf in shelfs">
<panel-body :shelf="shelf" :selected.sync="selected"></panel-body>
</li>
</ul>
</div>
</div>
</template>
<script>
import PanelBody from '../components/PanelBody'
export default {
name: 'panel-body',
components: {
'panel-body': PanelBody
},
data: () => ({
shelfs: [{
name: 'shelf 1',
books: [{
title: 'Lorem ipum'
}, {
title: 'Dolor sit amet'
}]
}, {
name: 'shelf 2',
books: [{
title: 'Ipsum lorem'
}, {
title: 'Amet sit dolor'
}]
}],
selected: {}
})
}
</script>
<style scoped>
a {
color: #42b983;
}
</style>
Mon panelBody est:
<template>
<div id="panel-body">
<a href="#" v-on:click.prevent.stop="select">{{ shelf.name }}</a>
<ul v-show="isSelected">
<li v-for="book in shelf.books">{{ book.title }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'panel-body',
props: ['shelf', 'selected'],
computed: {
isSelected: function () {
return this.selected === this.shelf
}
},
methods: {
select: function () {
this.selected = this.shelf
}
}
}
</script>
<style scoped>
a {
color: #42b983;
}
</style>
S'il vous plaît aider! Ne pouvez pas comprendre le message d'erreur "vue.mes.js?65d7:3877 Uncaught RangeError: le Maximum de la pile d'appels de taille dépassé". Lorsque je supprime les données tout fonctionne comme il se doit.
Vous ne devez pas utiliser
Il l'a fait le travail...??
pas de unfort, je reçois une "Propriété ou méthode "étagère" n'est pas défini sur l'instance, mais référencé au cours de rendu" et "L'option "données" doit être une fonction qui retourne une instance de la valeur dans les définitions de composant." ce qui est étrange.
=>
fonctions avec données propriété, il suffit d'utiliser data(){return{...}}
Il l'a fait le travail...??
pas de unfort, je reçois une "Propriété ou méthode "étagère" n'est pas défini sur l'instance, mais référencé au cours de rendu" et "L'option "données" doit être une fonction qui retourne une instance de la valeur dans les définitions de composant." ce qui est étrange.
OriginalL'auteur Teoman Kirac | 2017-06-13
Vous devez vous connecter pour publier un commentaire.
La raison pour laquelle vous avez l'erreur
est à cause de cette
Vous avez défini votre Panneau composant avec
name: 'panel-body'
. Changement dename: 'panel'
, et de vous retirer votre référence circulaire.Les autres questions mentionnées dans les commentaires et l'autre réponse s'appliquent généralement. Ici sont des versions de travail de vos composants.
Panneau.vue
PanelBody.vue
Je voulais remarque une chose de plus. En raison de ce ligne dans PanelBody,
this.selected = this.shelf
Vue va lancer un avertissement que vous êtes à la mutation d'un prop directement. Généralement, vous devez conserver une copie locale d'un bien que vous allez à muter. J'ai mis à jour le code ci-dessus pour le faire.J'ai mis à jour le PanelBody code avec une explication rapide.
Bert Monsieur, vous êtes incroyable. sérieusement je vous remercie pour votre explication et de l'expertise. très apprécié 🙂
OriginalL'auteur Bert
la synchronisation a changé de vue2.
https://vuejs.org/v2/guide/components.html#sync-Modifier
vous devriez l'utiliser de cette façon
et de l'enfant
OU
vous pourrait faire tout ce
et de l'enfant
prop.sync="parentProp"
comme dans la question, l'AUTO se développe à prop-déclarations d'événements. La seule chose qui doit être modifié dans la question de code: au lieu de saisir manuellement la mutation des accessoiresthis.selected = this.shelf
il devrait y avoirthis.$emit('update:selected', this.shelf)
. Exemple: jsfiddle.net/wostex/63t082p2/72ont essayé toutes les variantes de ce que John et Wostex ont suggéré à pas de chance. L'erreur est maintenant "Propriété ou méthode "étagère" n'est pas défini sur l'instance, mais référencé au cours de rendu." Mais cette erreur n'est autre source de données n'est pas une fonction, comme Vamsi Krishna suggéré..
les données doivent être données de la fonction: function(){ return {bla: true} }
OriginalL'auteur John