Блог

Я потратил почти 2 часа на выяснение, но я не понимаю, что я делаю не так. Я просто получаю данные в своем родительском компоненте, а затем передаю их своему дочернему компоненту, и в моем дочернем компоненте я использую реквизиты для получения этого компонента, но я ничего не получаю. К вашему сведению, я получаю все свои данные в родительском компоненте, если я выполняю консоль.войдите, этого просто нет в моем дочернем компоненте.

Это мой родительский компонент:

     <template>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="about2">
          <h1>What I do</h1>
          <StudyCard :studies="data.studycards" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StudyCard from "@/components/StudyCard.vue";
import data from "../assets/data.json";
export default {
  components: {
    StudyCard,
  },
  data() {
    return {
      data,
    };
  },
};
console.log(data.studycards);
</script>
  

Это сценарий моего дочернего компонента: (это единственное, что вам нужно, поскольку это создает проблему)

 <script>
export default {
  props: ["studies"],
};
console.log(studies); //This line is an error 
</script>
  

Спасибо за решение проблемы.

Проблема в том, что вы получаете доступ к реквизитам за пределами метода или перехватов жизненного цикла.

 <script>
export default {
  props: ["studies"],
  mounted() {
    console.log(this.studies); 
  }
};
</script>