如何从 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();    },现在，对于数组friend中的每个friends，我需要渲染一个 d3.js 图表。我在另一个 JS 文件中有一个可以正常工作的方法，它被称为create_spider_chart(friend, target). 该friend变量包含来自我们上面的 vue 组件的朋友数组的成员，并且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)to 直到 Vue 重新渲染您的模板并根据回调中元素的存在来运行所有代码。

这篇文档解释了它......