[Vuejs]-Wait for alert dialog response in vutify

by

0👍

✅

<template>
    <v-dialog v-if="alertDict" :value="alertDict.showDialog" max-width="460">
      <v-card>
        <v-card-title>Titile</v-card-title>
        <v-card-text>Message</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn olcor="green darken-1" text @click="onClick('ok')">Ok</v-btn>
          <v-btn olcor="green darken-1" text @click="onClick('cancel')">Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
</template>
<script>
export default {
   methods: {
     onClick(value) {
       this.$emit('response', value);
     }
   }
}
</script>

<template>
  <div>
      <button @click="onClick">show dialog</button>
      <Alert
       :alertDict="alertDict"
       @response="onResponse"
      />  
  </div>
</template>
<script>
import Alert from "../components/Alert";
export default {
   data() {
     return {
       alertDict: {
         showDialog: false
       }
     }
   },
   methods: {
    onClick() {
      // your ClickFunc
      this.alertDict.showDialog = true;
    },
    onResponse(value) {
      console.log(value);
      this.alertDict.showDialog = false;
    }
  }
}
</script>

Some suggestion here,

  1. Study some coding style, and find one which make sense to you and follow it, this is for better code readability. For example, naming convention, use camelcase in js script code for function and variable name.
    This is one of the blog u can study.
    https://medium.com/javascript-in-plain-english/javascript-naming-convention-best-practices-b2065694b7d
  2. In your example, <Alert> is child component, and you pass alertDict into <Alert>(child) as props. Then you mutate the props(alertDict.showDialog=false) in <Alert>(child).
    This is bad practice in vue. https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
    Instead of mutate props, emit event to parent and mutate it in parent.
    Understand emit and event of vue component. https://v2.vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

Leave a comment