nodeClick doesn't work

[lianghuilin]

template code

<div style="width: auto; height: 300px;margin: 200px auto;width: 500px;">
        <vue-mermaid :nodes="data" type="graph LR" @nodeClick="editNode"></vue-mermaid>
</div>

javascript code

import Vue from "vue";
import VueMermaid from "vue-mermaid";

export default {
  name: "FlowPage",
  data() {
    return {
      data: [
        {
          id: "1",
          text: "A",
          link: "---",
          next: ["2"],
          editable: true,
          style: "fill:#f9f,stroke:#333,stroke-width:4px"
        },
        { id: "2", text: "B", edgeType: "circle", next: ["3"] },
        { id: "3", text: "C", next: ["4", "6"] },
        { id: "4", text: "D", link: "-- This is the text ---", next: ["5"] },
        { id: "5", text: "E" },
        { id: "6", text: "F" }
      ]
    };
  },
  methods: {
    editNode(node) {
     // even if i'm bind the edit event,it doesn't work
      console.log("come in", node);
      alert(node);
    }
  }
};

[robin1liu]

only the node with 'editable: true' support click event, so make sure it, thx

[Haelenia]

Hi,
I have the same probleme even with my node having editable: true.
I think it is linked to the security update on mermaid preventing clic action with securityLevel: strict => https://mermaidjs.github.io/#/README
If I switch back to a previous version of mermaid (like 8.0.0) it is working just fine.

[gioppoluca]

Also for me is not working.
The node is editable, but no event get fired any hint?

[gioppoluca]

Fixed by adding the config option like this:
merconf: { theme: "default", startOnLoad: false, securityLevel: 'loose' },

Add this to the template:

[via4e]

Fixed by adding the config option like this:
merconf: { theme: "default", startOnLoad: false, securityLevel: 'loose' },

Thank you, i fix it before with manually edit vue-mermaid.js.
See you comment, andI try again with mermaid config, and see trouble in my syntax. Syntax was fixed and all working now.
Few words to people with same problem. How to fix clicks on nodes.

1. Generate node object with "editable: true" property

2. initialize vue-mermaid with binded config defenition
   <vue-mermaid v-bind:nodes="data" type="graph TB" @nodeClick="editNode" v-bind:config="mermaid">

3. Define config in Data section in your template. Check your config defenition contains securityLevel: 'loose' string
   data: function() {
   return {
   mermaid : {
   theme: "default",
   startOnLoad: !1,
   securityLevel: 'loose'
   }}},