javascript - 不能在子方法 :{} vue. js 中使用传递的 Prop

Question

我将数组作为 Prop 传递给 child 。并尝试在谷歌地图方法中使用它。但是当我在 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;
  },
}

child

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 事件，因为它可以在您可以显示任何数据之前安装。要验证这一点，您可以在 mounted Hook 中添加一个 console.log(this.articles) 并查看它很可能是空的。

我建议你做的是，鉴于在父组件中你有 articles 作为计算属性(它是 react 性的)，你还应该在里面调用 initMap每次 prop articles 更改时， child 。最简单的方法是在子组件中使用观察者:

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