Use function vue in components HTML

In vuejs function I use Library function this.editor.addNode and i used "@click=“Clicked” It’s not working in vuejs You can recommend for using in vuejs

card_devices: ' <div class="card-devices" > <div class="header"> <h1> Test </h1> </div> <div class="body" > <span @click="Clicked"> Name :</span> </div> </div> </div> '

[myshinjio]

It’s working Thank you very help full. 👍

[jerosoler]

Hello @myshinjio

For vue you have to register the components.

Example: App.vue

<template>
  <div id="app">
    <div id="drawflow"></div>
  </div>
</template>

<script>
import Vue from 'vue'
/*eslint-disable */
import NodeClick from './components/NodeClick.vue'
import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css' // eslint-disable-line no-use-before-define
/*eslint-enable */


export default {
  name: 'App',
  data() {
    return {
      editor: null,
    }
  },
  mounted() {
    const id = document.getElementById("drawflow");
    this.editor = new Drawflow(id, Vue);
    this.editor.start();
    const props = {};
    const options = {};
    this.editor.registerNode('NodeClick', NodeClick, props, options);
    const data = {};
    this.editor.addNode('Name', 0, 1, 150, 300, 'Class', data, 'NodeClick', 'vue');

  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#drawflow {
  width: 100%;
  height: 500px;
  border: 1px solid red;
}
</style>

Component NodeClick

<template>
  <div class="card-devices" >
     <div class="header">
        <h1> Test </h1>
     </div>
    <div class="body" >
       <span @click="Clicked"> Name :</span>
     </div>
  </div>
</template>

<script>
export default {
  methods: {
    Clicked() {
      alert("hello-drawflow");
    }
  }
}
</script>