Question

我将数组作为prop传递给child。并尝试在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()
  }
}

不能在孩子的方法中使用传递的道具：{} vue.js

1 个答案: