javascript - Mermaid FlowChart 在 Vue 3 中无法使用动态数据正确渲染
问题描述
我正在使用美人鱼库来创建流程图。当我使用静态数据创建示例图表时,它工作得很好。但是,一旦我尝试用我获取的数据替换静态数据,图表就会中断,而不是显示图表,而是打印出图表语法。
这是我的代码:
<template>
<div>
<VueMermaid
type="graph TD"
:nodes="dataChart"
/>
</div>
</template>
<script>
import axios from "axios";
import VueMermaid from "../../components/FlowchartComponent.vue";
export default {
components: {
VueMermaid
},
data() {
return {
dataChart:[
{id:'0',text:'Node0', next:['1']},
{id:'1',text:'Node1',next:['2','3', '4', '5']},
{id:'2',text:'Node2', next:['6']},
{id:'3',text:'Node3', next:['6']},
{id:'4',text:'Node4', next:['6']},
{id:'5',text:'Node5', next:['6']},
{id:'6',text:'Node6'}
]
}
},
setup() {
let dataList = [];
axios.get(`link_to_API`)
.then((data) => {
console.log(data);
console.log("tasks", data.data.tasks[0]);
console.log("tasks_id", data.data.tasks[0].task_id);
console.log("downstream", data.data.tasks[0].downstream_task_ids[0]);
let selection1 = data.data.tasks;
//create for each task an item in dataList with id, name of node and next node name
for (let z in selection1){
let item={id: "", text: "", next:""};
item.id=z;
item.text=data.data.tasks[z].task_id;
item.next=data.data.tasks[z].downstream_task_ids;
dataList.push(item);
// console.log("item", item);
}
console.log("dataList", dataList);
// replace in dataList for each item the value of next (string) with the id of the node that has the same string as text
for(let i in dataList){
console.log("dataList[i].next", dataList[i].next);
for(let h in dataList[i].next){
console.log("dataNext einzeln", dataList[i].next[h]);
let obj = dataList.find(o => o.text === dataList[i].next[h]);
console.log("obj", obj);
// console.log("obj.id", obj.id);
dataList[i].next[h] = obj.id;
}
}
console.log("newdataList", dataList);
});
return {
dataList
}
},
// Component should only be built when fetched data is ready
async created(){
await axios.get(`link_to_API`);
console.log("this.dataChart", this.dataChart);
//replace values of dataChart with values of dataList
this.dataChart = this.dataList;
console.log("this.dataChart", this.dataChart);
}
}
</script>
<style scoped>
</style>
我使用的 FlowchartComponent 包含 vue-mermaid 库中使用的代码:https ://github.com/robin1liu/vue-mermaid/blob/master/src/vue-mermaid.vue和 mermaidjs 库本身已经通过 npm 安装。
代码的预期结果将是一个通常的美人鱼流程图。只要我只在 data() return{} 中使用 dataChart 就可以了。但是,一旦我尝试像在 mount() 中那样更改该数据,我就会得到如下信息:
图 TD 0[Node0]-->1[Node1] 1[Node1]-->2[Node2] 1[Node1]-->3[Node3] 1[Node1]-->4[Node4] 1[Node1] -->5[Node5] 2[Node2]-->7[Node7] 3[Node3]-->7[Node7] 4[Node4]-->7[Node7] 5[Node5]-->7[Node7 ] 7[节点7]
有谁知道为什么会这样?
解决方案
推荐阅读
- python - 进行 2 次旋转时对象被重置
- javascript - 机车滚动获取元素位置
- asynchronous - 如何在 Rust Hyper 中将响应主体读取为字符串?
- c++ - 解释 Ghidra 指针(ELI 不了解 C/C++)
- java - 有没有办法在代码中使用没有硬编码属性键的属性文件?
- bash - 是否可以获取一个 bash 脚本来加载其功能而不执行它?
- c# - Caliburn.Micro,当键入非现有项目时,SelectedItem 不会在 EditableCombobox 上触发
- python-3.x - 具有 2 列的 Pandas 矢量化字符串比较操作
- javascript - Vue.js + TypeScript 导入纯 js 函数
- python - 应用 auth.0008_alter_user_username_max_length...Traceback(最近一次调用最后一次),django mssql 后端迁移错误