自定义 Vue 组件对话框，多个触发器

Question

我正在尝试实现一个组件，如果字段发生更改，它可能会触发需要用户反馈的代码路径。 我正在使用另一个相当广泛使用的组件 (ViewDialogue) 来呈现和返回该反馈。

我遇到的问题是，如果发生多个更改，我只会收到最后一个的对话。 例如：在 AChange 函数中，即使触发了 UpdateB 和 UpdateC，我也只会收到 HandleA() 的对话。

父组件：

<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>

子组件：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

我对这个答案并不感到兴奋，因为它似乎与 nuxt 实例挂钩，但我们到了。 使用了 [this][1] 对话框组件。 [1]：https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d

在我的 Plugins/core-components.js 中：

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

在我的布局/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>

最后，我的父组件（现在没有孩子参与）

<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>