Models in vuejs and vuetify, thing are not working #bootstrap,

[nsiimbi-com]

Is there a way I can work around that?.

  <div>
    <div class="title-box" v-b-modal.sendEmailModel>
      <i class="fas fa-at"></i> Send Email
    </div>

    <b-modal id="sendEmailModel" ref="sendEmailModel" title="E-mal Node">
      <div class="box">
        <p>Select Offer:</p>
        <b-select df-selectDatabase>
          <b-select-option value="freeRIDE">Free RIDE</b-select-option>
          <b-select-option value="monthly1GBData"
            >Monthly 1GB Data</b-select-option
          > </b-select
        ><br /><br />
        <b-input
          type="text"
          df-subject
          v-model="nodeKey"
          placeholder="Email Subject"
        /><br />

        <b-textarea df-body placeholder="Email Body Goes Here" />
        <p>Output Log</p>
      </div>

      <template slot="modal-footer">
        <b-button variant="secondary" @click="closeModel('sendEmailModel')"
          >close</b-button
        >
      </template>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    closeModel(refname) {
      this.$refs[refname]?.hide();
    },
  },
};
</script>```

[jerosoler]

Hello @nsiimbi-com

I have not played with vuetify.

What is not working?

Import the component correctly: https://github.com/jerosoler/Drawflow/issues/37

[nsiimbi-com]

Atleast the code below is supposed to work, but what I have realized is that, the lib only takes inputs with plain html code, and inputs through v-model are not reflecting. I re-wrote the entire demo project in vuejs. But that's the problem I have I wanted to display a dialogue (model) for each node...

  <div>
    <div class="title-box" v-b-modal.sendEmailModel>
      <i class="fas fa-at"></i> Send Email
    </div>
    <input df-selectEmailOffer type="hidden" v-model="selectOffer" />
    <input df-emailSubject type="hidden" v-model="subject" />
    <input df-emailBody type="hidden" v-model="body" />

    <b-modal id="sendEmailModel" ref="sendEmailModel" title="E-mal Node">
      <div class="box">
        <p>Select Offer:</p>
        <b-select v-model="selectOffer">
          <b-select-option value="freeRIDE">Free RIDE</b-select-option>
          <b-select-option value="monthly1GBData"
            >Monthly 1GB Data</b-select-option
          > </b-select
        ><br /><br />
        <b-input
          type="text"
          v-model="subject"
          placeholder="Email Subject"
        /><br />

        <b-textarea v-model="body" placeholder="Email Body Goes Here" />
        <p>Output Log</p>
      </div>

      <template slot="modal-footer">
        <b-button variant="primary" @click="closeModel('sendEmailModel')"
          >Finish</b-button
        >
      </template>
    </b-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectOffer: "",
      subject: "",
      body: "",
    };
  },
  methods: {
    closeModel(refname) {
      this.$refs[refname]?.hide();
    },
  },
};
</script>

[nsiimbi-com]

The Issue is with df-

[jerosoler]

Bootstrap modal append in footer. Append in drawflow node element.

https://bootstrap-vue.org/docs/components/modal

[nsiimbi-com]

The above code is one of the nodes in vuejs, but my problem is being able to receive data below in the payload. data doesn't show up. df-selectEmailOffer df-emailSubject df-emailBody

[jerosoler]

Try event bus and props: https://github.com/jerosoler/Drawflow/issues/37#issuecomment-717822302