VueJs Dialog Reusable Component with buttons different action

Question

I am trying to build a reusable component that called v-dialog. The idea is that I when the the dialog pop up there will be consist of 2 buttons which is called submit and cancel.

For the submit button of dialog component will be linked with different actions based on user clicks which button.

For example button A will call function name A and button B will call function name B and so on when user clicks on submit button of the dialog.

Let's say this is a component file I called DialogReusable.vue

<v-dialog
v-model="dialog"
                  persistent
                  max-width="300"
                >
                  <v-card>
                    <v-card-title
                      class="text-h5"
                      style="word-break: break-word"
                    >
                      Title
                    </v-card-title>
                    <v-card-actions>
                      <v-spacer />
                      <v-btn
                        color="green darken-1"
                        text
                        @click="dialog = false"
                      >
                        Cancel Button
                      </v-btn>
                      <v-btn
                        class="primary"
                        @click="functionSubmits()"
                      >
                        Submit
                      </v-btn>
                    </v-card-actions>
                  </v-card>
                </v-dialog>

And this is the parent file that I called MainParent.vue For this file it has like 3 buttons which link to different function.

When user clicks on each button the Dialog should appears and when user clicks on the submit button of the dialog then it will call the respective function name that I set @click on each button.

                <v-btn
                  v-if="condition"
                  color="primary"
                  dark
                  @click="functionA()"
                >
                  Function A
                </v-btn>
                <v-btn
                  v-if="condition"
                  class="primary"
                  @click="functionB()"
                >
                  Function B
                </v-btn>
                <v-btn
                  v-if="condition"
                  class="primary"
                  @click="functionC()"
                >
                  Function C
                </v-btn>

score 2 · Accepted Answer · answered Nov 08 '22 at 02:52

That is the concept of passing the functions through props attribute in Vue.

Let's me show you the first example of passing the function from parent into child component.

Getting a value from the parent

If you want a child component to access a parent's method, it seems obvious to just pass the method straight down as a prop.

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

And you child component would be like:

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

Getting a value from the child

Other case you might want to get a value from child into parent component, for example the function in parent component has a param name.

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.log('From the child:', valueFromChild);
    }
  }
}

Where in the child component you pass the value in when calling it:

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method("some param name");
  }
}

Regarding you question, I think you can achieve by the following:

Let's say you have 3 submit buttons and each button has different action.

First let's create the reusable pop up dialog that acts like a child component.

<template>
  <v-dialog
    :value="dialog"
    persistent
    max-width="300"
    @input="$emit('input', $event)"
  >
    <v-card>
      <v-card-title
        class="text-h5"
        style="word-break: break-word"
      >
        Title Dialog
      </v-card-title>
      <v-card-actions>
        <v-spacer />
        <v-btn
          color="green darken-1"
          text
          @click="close"
        >
          Cancel
        </v-btn>
        <v-btn
          class="primary"
          @click="onBtnSubmit"
        >
          Confirm
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>


export default {
  name: 'Dialog',
  props: {
    dialog: {
      type: Boolean,
      required: true
    },
    buttonActionName: {
      type: String,
      required: true
    },
    method: {
      type: Function,
      required: true
    }
  },
  methods: {
    close() {
      this.$emit('close-dialog')
    },
    onReportBtnSubmit() {
      if (this.buttonActionName.length > 0) {
        this.method(this.buttonActionName)
      } else {
        this.method()
      }
      this.close()
    }
  }
}
</script>

<style scoped>

</style>

I assumed that you understand the concept of passing the functions through props attribute in Vue.

// This dialog will pass function `firstBtnSubmit` without param name
<Dialog
   :dialog.sync="firstBtnDialog"
   :method="firstBtnSubmit"
   button-action-name=""
   @close-dialog="firstBtnDialog= false;"
 />
<v-btn
  @click="showDialogFirstBtn">
  firstBtnClick
</v-btn>

// This dialog will pass function `secondBtnSubmit` with param name
<Dialog
   :dialog.sync="secondBtnDialog"
   :method="secondBtnSubmit"
   button-action-name="id1"
   @close-dialog="secondBtnDialog = false;"
 />
<v-btn
  @click="showDialogSecBtn">
  secondBtnClick
</v-btn>

// you can create a third button below by yourself.

export default {
 data() {
   return {
     firstBtnDialog: false,
     secondBtnDialog: false,
     thirdBtnDialog: false,
  },
 methods: {
    firstBtnSubmit() {
       // Do your stuff
    },
    secondBtnSubmit(param) {
       // do your staff with param 
    },
    thirdBtnSubmit () {
       // do your stuff
    },
    // To trigger dialog to pop up 
    showDialogFirstBtn() {
       this.firstBtnDialog = true;
    },
    showDialogSecBtn() {
       this.secondBtnDialog= true;
    },
    showDialogThirdBtn() {
       this.thirdBtnDialog= true;
    }
  }
}

Note

I do NOT own all contents that I wrote here.

All contents I got from different site

Concept to pass function as props

How to use reusable component in Vue: Stackoverflow

VueJs Dialog Reusable Component with buttons different action

1 Answers1