如何从vue.js方法渲染d3.js图表(传递目标div)？

Question

我有一个基本的vue代码，如下所示：

new Vue({

    el : '#friendlist',

    data : {

        friends : []

    },

    methods : {

        fetchStats : function(){

            const axios_data = {
                _token  : $('meta[name="csrf-token"]').attr('content')
            };

            axios.post('/friend-stats/all', axios_data).then(response => {

                this.friends = response.data;

            });

        }
    },

    mounted : function(){

        this.fetchStats();

    },

现在，对于friends数组中的每个friend，我需要呈现一个d3.js图表。我在另一个JS文件中有一个可以正常工作的方法，它叫做create_spider_chart(friend, target)。friend变量包含来自上面的vue组件的friends数组的一个成员，而target是图表应该追加到的目标元素。这就是问题出现的地方。

如果我在axios调用的响应中这样做：

this.friends = response.data.data;
let target;
for(let i=0;i<this.friends.length;i++){
     target = '.spider-graphic-mini[data-id="'+this.friends[i].id+'"]';
     create_spider_chart(this.friends[i], target);   //d3.js
}

元素.spider-graphic-mini[data-id="'+this.friends[i].id+'"]确实存在于HTML中：

<template v-for="(friend,key) in friends">
     <div class="col-md-6 friend-panel p-3">
          <h5>@{{ friend.name }}</h5>
          <div class="spider-graphic-mini mb-4" :data-id="friend.id"></div>
     </div>
</template>

但是，当我将该标识符传递给create_spider_chart函数时，该元素显然不存在。所以$(target)有length=0，而函数不知道在哪里创建图表。

我该如何解决这个问题呢？

Answer 1

从来没有使用过d3，所以对此持保留态度。

JS是单线程的，而Vue DOM更新过程是异步的。当您将内容分配到friends数组中时，Vue还没有机会用新数据呈现您的模板。这就是为什么你的元素还不存在。

你需要做的就是使用$nextTick(callback)，直到Vue重新呈现你的模板，然后根据回调中元素的存在来运行所有的代码。

This piece of documentation解释说..。