Can't use v-if in my vue component

[koyudalex]

In my component:

          <select df-select_type>
            <option value="">Select</option>
            <option value="1"> Select type 1</option>
            <option value="2">Select type 2</option>
            <option value="3">Select type 3</option>
          </select>
          <div v-if="select_type">
            <p>Select type: {{ select_type }}</p>
          </div>

Register and add node:

                   this.editor.registerNode(...);
                   this.editor.addNode(..., 'vue');

No change when I choose some select option...

It is interesting but in case I register node first and then start editor it is working properly:

                   this.editor.registerNode(...);
                   ...
                   this.editor.start();

[jerosoler]

Hi @koyudalex

The "df-select_type" attribute. No is a vue data. Unless you have that value created.

[koyudalex]

I have:

    props: {
        select_type: String,
    },

And when:

        <select df-select_type @change="onMyChange">

       ...

          methods: {
        'onMyChange': function () {
            console.log(`New select type: ${this.select_type}`);
        },

I can see in console:

New select type: 2

And it is working somehow in case I start editor after node creation.

[jerosoler]

The change method is only showing the result of what has come from the prop? A new value is not assigned.

Are you missing the v-model?

[koyudalex]

Changed. Using v-model does not help:

     <select v-model="mydata.select_type" @change="onMyChange">

       ...
         props: {
             mydata: Object,
         },
       ...
          methods: {
        'onMyChange': function () {
            console.log(this.mydata);
        },

In case I start editor after register node everything works and in console I see:

But if I register and add node after it is not working and in console I see

:

[jerosoler]

I think I am not understanding the problem.

The problem is that you can't use the "v-if"?

Regardless of whether you register sooner or later.

[koyudalex]

Sorry for misunderstanding.

1. I register sooner:

   
                  this.editor.registerNode(...);
                  ...
                  this.editor.start();

Result 1: Everything is OK. I choose new select option and v-if is working, also <p>Select type: {{ select_type }}</p> is working correctly.

2. I register later:

               this.editor.start();
               ...
               this.editor.registerNode(...);
               this.editor.addNode(..., 'vue');

Result 2: v-if is NOT working.

So, when I load some previously saved flow: everything is OK.
But in case I created new Node (UI): it is not working.

[jerosoler]

I have created an empty project.

While I'm developing, I think the option you are looking for is the HelloWorld2.vue component.

vue create testdf // Default Vue2 option

Install the library:

npm install drawflow --save

Change de app.vue file

<template>
  <div id="app">
    <button @click="exportdf">Export</button>
    <button @click="importdf">Import</button>
    <button @click="addnodedf">Add Node</button>
    <button @click="addnodedf2">Add Node2</button>
    <div id="drawflow"></div>
  </div>
</template>

<script>
/*eslint-disable */
import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css'
import HelloWorld from './components/HelloWorld.vue'
import HelloWorld2 from './components/HelloWorld2.vue'
import Vue from 'vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {

      exportValue: null,
    }
  },
  mounted() {
    const id = document.getElementById("drawflow");
    Vue.prototype.$df = new Drawflow(id, Vue, this);

    this.$df.registerNode('HelloWorld', HelloWorld, {select_type: "2"}, {});
    this.$df.registerNode('HelloWorld2', HelloWorld2,{}, {});
    this.$df.start();
    this.$df.addNode('HelloWorld', 0, 1, 150, 300, 'HelloWorld', {select_type: "1"}, 'HelloWorld', 'vue');

    this.$df.addNode('HelloWorld2', 0, 1, 150, 300, 'HelloWorld2', {select_type: "2"}, 'HelloWorld2', 'vue');
  },
  methods: {
    exportdf() {
      this.exportValue = this.$df.export();
      console.log(this.exportValue);
    },
    importdf() {
      this.$df.import(this.exportValue);
    },
    addnodedf() {
      this.$df.addNode('HelloWorld', 0, 1, 150, 300, 'HelloWorld', {select_type: "1"}, 'HelloWorld', 'vue');
    },
     addnodedf2() {
      this.$df.addNode('HelloWorld2', 0, 1, 150, 300, 'HelloWorld2', {select_type: "2"}, 'HelloWorld2', '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: 800px;
  border: 1px solid red;
}
</style>

component HelloWorld.vue

<template>
<div>
   <select df-select_type @change="onMyChange">
            <option value="">Select</option>
            <option value="1">Select type 1</option>
            <option value="2">Select type 2</option>
            <option value="3">Select type 3</option>
          </select>
          <div v-if="select_type">
            <p>Select type: {{ select_type }}</p>
          </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    select_type: String,
  },
  methods: {
        'onMyChange': function () {
            console.log(`New select type: ${this.select_type}`);
        },
  }
}
</script>

And component HelloWorld2.vue

<template>
<div>
    <h2>Hello World2</h2>
   <select df-select_type v-model="select_type">
            <option value="">Select</option>
            <option value="1">Select type 1</option>
            <option value="2">Select type 2</option>
            <option value="3">Select type 3</option>
          </select>
          <div v-if="select_type">
            <p>Select type: {{ select_type }}</p>
          </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld2',
  data() {
      return {
        select_type: false,
      }
  },
  mounted() {
       this.$nextTick(() => {
        const id = this.$el.parentElement.parentElement.id;
        const data = this.$df.getNodeFromId(id.slice(5));
        this.select_type = data.data.select_type;
       });
  },
}
</script>

Does this solve your problem?

[koyudalex]

Yeah, it does, thank you so much!

Looks like a bit tricky:

  Vue.prototype.$df = new Drawflow(id, Vue, this);

  ...

  mounted() {
       this.$nextTick(() => {
        const id = this.$el.parentElement.parentElement.id;
        const data = this.$df.getNodeFromId(id.slice(5));
        this.select_type = data.data.select_type;
       });
  },

But I believe it is cause I am not very familiar with Vue.

Anyway, thank you again!