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 => 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