Блог

Я использую библиотеку mermaid для создания блок-схем. Когда я использую статические данные для создания примерной диаграммы, она работает совершенно нормально. Но как только я пытаюсь заменить статические данные моими извлеченными данными, диаграмма разрывается, и вместо того, чтобы показывать диаграмму, она выводит синтаксис графика.

Это мой код:

 <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>
 

Компонент блок-схемы, который я использую, содержит код, используемый в библиотеке vue-mermaid: https://github.com/robin1liu/vue-mermaid/blob/master/src/vue-mermaid.vue и сама библиотека mermaidjs была установлена через npm.

Ожидаемым результатом кода будет обычная блок-схема mermaif. Это работает до тех пор, пока я использую только диаграмму данных в возврате data () {}. Но как только я пытаюсь изменить эти данные, как я сделал это в смонтированном (), я получаю что-то вроде этого:

график TD 0[Node0]->1[Node1] 1[Node1]->>2[Node2] 1[Node1]->>>3[Node3] 1[Node1]->>>>4[Node4] 1[Node1]->>>>>5[Node5] 2[Node2]—>>>>>>7[Узел 7] 3[Узел 3]—>>>>>>>7[Узел 7] 4[Узел 4]—>>>>>>>>7[Узел 7] 5[Узел 5]—>>>>>>>>>7[Узел 7] 7[Узел 7]

Кто — нибудь знает, почему это происходит?