Custom Vue Component Dialog box, multiple triggers

Question

I'm trying to implement a component where, if a field changes, it may trigger a code path that necessitates user feedback. I'm using another, fairly widely used component (ViewDialogue), to render and return that feedback.

The problem I am experiencing is, if multiple changes occur, I only receive the dialogue for the final one. For example: In the AChange function, I will only receive the dialogue for HandleA() even if UpdateB and UpdateC are triggered.

PARENT COMPONENT:

<template>
  <v-card>
    <v-text-field
      v-model="valueC"
      @change="CChange"
    ></v-text-field>
    <v-text-field
      v-model="valueB"
      @change="BChange"
    ></v-text-field>
    <v-text-field
      v-model="valueA"
      @change="AChange"
    ></v-text-field>
    <v-dialog v-model="qdialog" width="500">
      <ViewDialogue :question="question" @HandleAnswer="HandleAnswer" />
    </v-dialog>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    qdialog: false,
    question: '',
    valueA: 0,
    valueB: 0,
    valueC: 0,
    answerA: false,
    answerB: false,
    answerC: false,
    BChanged: false,
    CChanged: false,
  }),
  methods: {
    HandleAnswer(x) {
      if (x === true) {
        if (this.answerA) {
          this.DoA()
        } else if (this.answerB) {
          this.DoB()
        } else if (this.answerC) {
          this.DoC()
        }
      } else {
        this.answerA = false
        this.answerB = false
        this.answerC = false
        this.question = ''
        this.qdialog = false
      }
    },
    BChange() {
      this.BChanged = true
    },
    CChange() {
      this.CChanged = true
    },
    DoA() {
      this.valueA = this.valueB
      this.answerB = false
      this.qdialog = false
    },
    DoB() {
      this.valueB = this.valueA
      this.answerB = false
      this.qdialog = false
    },
    DoC() {
      this.valueC = this.valueA
      this.answerC = false
      this.qdialog = false
    },
    UpdateB() {
      if (this.valueB !== this.valueA) {
        this.question = 'Update B to A?'
        this.answerB = true
        this.qdialog = true
      }
    },
    UpdateC() {
      if (this.valueC !== this.valueA) {
        this.question = 'Update C to A?'
        this.answerC = true
        this.qdialog = true
      }
    },
    HandleC() {
      if (this.BChanged) {
        this.UpdateB()
      }
      if (this.CChanged) {
        this.UpdateC()
      }
    },
    HandleA() {
      if (this.valueA < this.valueB + this.valueC) {
        this.question = 'Update A to B?'
        this.answerA = true
        this.qdialog = true
      }
    },
    AChange() {
      this.HandleC()
      this.HandleA()
    },
  },
}
</script>

CHILD COMPONENT: ViewDialogue

    <template>
  <v-card>
    <v-card-title class="text-h5 grey lighten-2">
      {{ question }}
    </v-card-title>
    <v-divider></v-divider>

    <v-card-actions>
      <v-btn color="primary" text @click="HandleAnswer(false)"> No </v-btn>
      <v-spacer></v-spacer>
      <v-btn color="primary" text @click="HandleAnswer(true)"> Yes </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  props: {
    question: { type: String, default: '' },
  },
  emits: ['HandleAnswer'],
  data: () => ({}),
  methods: {
    HandleAnswer(a) {
      this.$emit('HandleAnswer', a)
    },
  },
}
</script>

Answer 1

I'm not thrilled about this answer, as it seems to hook into the nuxt instance, but here we are. Used [this][1] Dialog component. [1]: https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d

In my Plugins/core-components.js:

import ConfirmDialog from '@/components/Test/ConfirmDialog.vue'
Vue.component('ConfirmDialog', ConfirmDialog)

In my layouts/default.vue:

    <template>
  <v-main>
    <v-app id="app">
      <ConfirmDialog ref="confirm"></ConfirmDialog>
      <nuxt />
    </v-app>
  </v-main>
</template>
<script> 
export default {
  async mounted() {
    this.$nuxt.$root.$confirm = this.$refs.confirm
  },}
</script>

Finally, my Parent Component (no child involved now)

<script>
export default {
  data: () => ({
    qdialog: false,
    question: '',
    valueA: 0,
    valueB: 0,
    valueC: 0,
    answerA: false,
    answerB: false,
    answerC: false,
    BChanged: false,
    CChanged: false,
  }),
  methods: {
    HandleAnswer(x) {
     return new Promise((resolve, reject) => {
      if (x === true) {
        if (this.answerA) {
          this.DoA()
        } else if (this.answerB) {
          this.DoB()
        } else if (this.answerC) {
          this.DoC()
        }
      resolve(true)
      } else {
        this.answerA = false
        this.answerB = false
        this.answerC = false
        this.question = ''
        this.qdialog = false
      }
     resolve(false)
    }}),
    BChange() {
      this.BChanged = true
    },
    CChange() {
      this.CChanged = true
    },
    DoA() {
      this.valueA = this.valueB
      this.answerB = false
    },
    DoB() {
      this.valueB = this.valueA
      this.answerB = false
    },
    DoC() {
      this.valueC = this.valueA
      this.answerC = false
    },
    async UpdateB() {
      if (this.valueB !== this.valueA) {
      if (
        await this.$nuxt.$root.$confirm.open(
          'Update B to A?',
          'Are you sure?',
          { color: 'red',}
        )
      ) {
        this.answerB= true
        await this.HandleAnswer(true)
      } else {
        await this.HandleAnswer(false)
      }
      }
    },
    async UpdateC() {
      if (this.valueC !== this.valueA) {
      if (
        await this.$nuxt.$root.$confirm.open(
          'Update C to A?',
          'Are you sure?',
          { color: 'red',}
        )
      ) {
        this.answerC = true
        await this.HandleAnswer(true)
      } else {
        await this.HandleAnswer(false)
      }
      }
    },
    async HandleC() {
      if (this.BChanged) {
        await this.UpdateB()
      }
      if (this.CChanged) {
        await this.UpdateC()
      }
    },
    async HandleA() {
      if (this.valueA < this.valueB + this.valueC) {
      if (
        await this.$nuxt.$root.$confirm.open(
          'Update A to B?',
          'Are you sure?',
          { color: 'red',}
        )
      ) {
        this.answerA = true
        await this.HandleAnswer(true)
      } else {
        await this.HandleAnswer(false)
      }
      }
    },
    async AChange() {
      await this.HandleC()
      await this.HandleA()
    },
  },
}
</script>