ditdot-dev / vue-flow-form

Create conversational conditional-logic forms with Vue.js.
https://www.ditdot.hr/en/vue-flow-form
MIT License
779 stars 174 forks source link

Feature request: use links to fire other methods not only urls #251

Closed danielcharrua closed 2 years ago

danielcharrua commented 2 years ago

Hello would be nice to fire some methods using the links on description (descriptionLink Array). In my case I wanted to fire a popup and is fired with methods.

This idea also applies for other users trying to do something using links on description and firing methods.

Thank you.

spinn commented 2 years ago

Hi @danielcharrua,

you could set up a delegated event handler and do whatever action you want there, eg:

<template>
  <flow-form
    ref="flowform"
    v-bind:language="language"
    v-bind:standalone="true"
  ></flow-form>
</template>

<script>
  // import all necessary packages

  export default {
    name: 'example',

    components: {
      FlowForm,
    },

    data() {
      return {
        questions: [
          new QuestionModel({
            id: 'test',
            title: 'Test question',
            type: QuestionType.Text,
            descriptionLink: [
              {
                url: '#test',
                text: 'FAQs',
                target: '_self',
              },
            ],
          }),
        ],
      }
    },

    mounted() {
      document.addEventListener('click', this.onClickListener)
    },

    methods: {
      onClickListener(event) {
        const link = event.closest('a')

        if (link && link.hash === '#test') {
          event.preventDefault()

          // do your action here
        }
      },
    },
  }
</script>
danielcharrua commented 2 years ago

Great idea, thank you!