не может использовать пропущенную опору в методе child: {} vue.js

Question

Я передаю массив child в качестве prop. И пытается использовать его в методе Google Map. Но когда я использую его внутри initMap: функция массив пустой.

в родительском

<div class="mapWrap">
    <mapping :articles="filterArticles" />
</div>

computed: {
  filterArticles(){
   let api = this.$store.getters.articles;

   let filteredStates = api.filter((article) => {
       return (this.keyword.length === 0 || article.address.includes(this.keyword)) &&
       (this.regions.length === 0 || this.regions.includes(article.region)) &&
       (this.rooms.length === 0 || this.rooms.includes(article.rooms1)) &&
       (this.city.length === 0 || this.city.includes(article.city))
   });

   return filteredStates;
  },
}

у ребенка

props: {
    articles: {
        type:Array
    },
},
name:"mapping",
data(){
    return {
        marker:[],
    }
},
mounted(){
    this.initMap();
},
methods: {
    initMap: function() {
        var mapOptions = {
            mapTypeId: 'roadmap',
            center: new google.maps.LatLng(35.652832, 139.839478),
            zoom: 10
        };

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        var articles = this.articles;
        console.log(articles);


    },
},

То, как я делаю это неправильно? Потому что у prop есть предметы, но когда я помещаю их в метод initMap, он начинает становиться пустым ...

Answer 1

Я попытался отследить код, и из того, что у вас есть, он будет работать в большинстве случаев, ИСКЛЮЧИТЬ, если данные, которые вы выбрали с помощью this.$store.getters.articles, являются асинхронными. В идеале не следует полагаться на событие mount дочернего компонента, поскольку его можно смонтировать, прежде чем вы сможете отобразить какие-либо данные. Чтобы убедиться в этом, вы можете добавить console.log(this.articles) внутри хука mounted и увидеть, что он, скорее всего, пуст.

Я предлагаю вам сделать следующее: учитывая, что в родительском компоненте у вас есть articles в качестве вычисляемого свойства (которое является реактивным), вы также должны вызывать initMap внутри дочернего элемента каждый раз, когда изменяется пропеллер articles. , Самый простой способ сделать это с помощью наблюдателя внутри дочернего компонента:

watch: {
  articles () {
    this.initMap()
  }
}