Как сделать так чтобы вызывалась модалка из нужного компонента, а не из App.vue?

Question

[nastya_zholudeva]

Есть компонент модалки Modal.vue

// Modal.vue
<template>
  <b-modal :class="className" v-model="modal" @ok="okModal" @cancel="okModal" :ok-variant="okButton">
    {{modalContent}}
  </b-modal>
</template>

<script>
  import { bus } from '../../bus'
  export default {
    name: 'Modal',
    props: {
      className: {
        type: String,
        default: 'modal-primary'
      },
      modalContent: {
        type: String,
        default: ''
      },
      okButton: {
        type: String,
        default: 'primary'
      }
    },
    data () {
      return {
        modal: false
      }
    },
    methods: {
      okModal () {
        this.modal = false
        this.$emit('click')
      }
    },
    mounted () {
      bus.$on('modalWindow', (val) => {
        console.log('123val', val)
        this.modal = val
      })
    },
    beforeDestroy () {
      bus.$off('modalWindow')
    }
  }
</script>

Я его подключаю как в некоторых компонентах

//Component.vue
</template>
//code
<Modal :modalContent="'Блок успешно сохранен'" @click="ok"/>
  </b-form>
</template>

<script>
import Modal from './Modal'
import { bus } from '../../bus'

export default {
  name: 'TextBlockForm',
  components: {
    Modal
  },
  props: {
    success: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    success (oldValue, newValue) {
      if (oldValue) {
        bus.$emit('modalWindow', true)
      }
    }
  },
  methods: {
    sendData () {
      ///////code
      if (this.success) {
        bus.$emit('modalWindow', true)
      }
    },
    ok () {
      bus.$emit('modalWindow', false)
      this.$emit('clickOnOk')
    }
  }
  }
}
</script>

success = true - передаю из родительского компонента при удачно выполненом запросе

Так и в App.vue, так как мне нужно отследить 403 ошибку, которая может всплыть при любом запросе.

//api конфиг файл 

axios.interceptors.response.use((response) => {
    return response
  }, (error) => {
    if (error.response.status == 403) {
      bus.$emit('modalWindow', true)
    }
    return Promise.reject(error)
  })

//App.vue
<template>
  <div>
    <router-view></router-view>
    <Modal :className="'modal-danger'" :modalContent="'Доступ запрещен'" :okButton="'danger'" @click="okModal"/>
  </div>
</template>



<script>
  import { bus } from '../bus'

  import Modal from '../src/components/Modal'
  export default {
    name: 'app',
    components: {Modal},
    methods: {
      okModal () {
        bus.$emit('modalWindow', false)
        this.$router.go(-1)
      }
    }
  }
</script>

Проблема возникает в том, что при любом исходе (есть 403 ошибка или нет) вызывается модалка из app.vue и перекрывает нужную модалку из компонента. По сути если находишься на странице, где подключен component.vue, проходит успешный запрос и success = true почему то сначала вызывается модалка из app.vue
Как можно это победить?

Answer 1

[Андрей Сергеев]

Хз, как делать локальные события использую глобальный bus. Мне кажется подход не верный.
Как вариант можно добавить модалке имя через ref

<Modal ref="yourModalNameRef" :modalContent="'Блок успешно сохранен'" @click="ok"/>

добавить метод open

// Modal.vue

...
    methods: {
      okModal () {
        this.modal = false
        this.$emit('click')
      },
      open (val) {
        this.modal = val        
      },
    },
...

и вместо

bus.$emit('modalWindow', true)

вызывать
this.$refs.yourModalNameRef.open();