I'm working on my Vue code and here's a snippet of what I have:
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();
},
Now, I need to render a d3.js chart for each friend in the friends array. I have a separate JS method called
create_spider_chart(friend, target)If I try to do it like this after the axios call:
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
}
The element
.spider-graphic-mini[data-id="'+this.friends[i].id+'"]<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>
However, despite the element being there, when passing its identifier to the create_spider_chart function, it doesn't seem to recognize it. Consequently, $(target) returns length=0, causing the chart creation to fail.
What would be the best approach to tackle this problem?