美人鱼流程图无法在 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',{id:'4',text:'Node4',{id:'5',text:'Node5',{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[节点0]-->1[节点1] 1[节点1]-->2[节点2] 1[节点1]-->3[节点3] 1[节点1]-->4[节点4] 1[节点1]-->5[节点5] 2[节点2]-->7[节点7] 3[节点3]-->7[节点7] 4[节点4]-->7[节点7] 5[节点5]-->7[节点7] 7[节点7]

有人知道为什么会这样吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）