Вызов метода, когда модальное закрытие в Vue

Question

У меня есть приложение Vue (и я относительно новичок в Vue), в любом случае у меня есть универсальный модал c, который отображается при сбое любого из моих вызовов axios.

На modal я хочу иметь возможность повторить неудачный процесс, когда нажата кнопка «Повторить попытку» button, но я немного пытаюсь понять, как этого добиться. Я не думаю, что props поможет мне, поскольку modal вызвано

VueEvent.$emit('show-error-modal')

Мне удалось в моем catch пропустить function, который потерпел неудачу при использовании

 VueEvent.$emit('show-error-modal', (this.test));

Тогда в моем modal у меня есть доступ к нему, используя

created() {
    VueEvent.$on('show-error-modal', (processFailed) => {
        console.log('processFailed', processFailed)
        this.processFailed = processFailed;
        $('#errorModal').modal('show').on('shown.bs.modal', this.focus);
    });
}

Используя 'F12', он дает

test: function test() {
      var _this2 = this;

      var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
      alert('boo');
      this.loading = true;
      var order_by = {
        'ho_manufacturers.name': 4,
        'services.servicename': 4
      };

      axios.post('/test/url', {
        id: this.selectedManufacturers,
        page: page,
        order_by: order_by
      }).then(function (response) {
        var paginator = response.data.paginator;

        _this2.$store.dispatch('paginateProducts', paginator);

        _this2.$store.dispatch('setProductPaginator', paginator);

        _this2.loading = false;
      })["catch"](function (error) {
        var processFailed = 'fetchProducts';
        _this2.loading = false;
        VueEvent.$emit('show-error-modal', _this2.test);
        console.log(error);
      });
    },

I не думайте, что это правильный способ сделать это, так как все this. заменены на _this2, как показано выше. Мне нужно, чтобы modal было обобщенным c, чтобы я мог использовать его повторно, но не могу понять, как повторить процесс при нажатии кнопки.

modals зарегистрированы в моем app.vue файл как

<template>
    <div>
        <!-- Other code here -->
        <app-error-modal />
    </div>
</template>
<script>
   // Other code here
   import ErrorModal from './components/ErrorModal';

   export default {
      name: 'App',

      components: {
         // Other code here
        appErrorModal: ErrorModal
      }

     // Other code here
</script>

Модальная кнопка HTML

<button ref="retryButton" class="btn btn-success col-lg-2" type="submit" data-dismiss="modal" @click="retryProcess">Retry</button>

Модальный script код

<script>
export default {
    name: "ErrorModal",

    created() {
        VueEvent.$on('show-error-modal', (processFailed) => {
            console.log('processFailed', processFailed)
            this.processFailed = processFailed;
            $('#errorModal').modal('show').on('shown.bs.modal', this.focus);
        });
    },

    methods: {
        focus() {
            this.$refs.retryButton.focus();
        },

        retryProcess() {
            //this.$parent.test();   TRIED THIS BUT DIDN'T WORK
        }
    }
}
</script>

Я бы предпочел не иметь в магазине .

Answer 1

Использовать пользовательское событие для вашего компонента

<div id="app">
    <error-modal v-if="isError" v-on:retry-clicked="retry"></error-modal>
    <button @click="isError = true">Make Error</button>
</div>


const errorModal = {
    template : "<button @click=\"$emit('retry-clicked')\">Retry</button>"
}

new Vue({
    el : "#app",
    data : {
        isError : false
    },
    components : {
        errorModal
    },
    methods : {
        retry : function(){
            this.isError = false;
            console.log("child component has called parent when retry clicked")
        }
    }
})

Пользовательское событие для компонента - VUEJS DO C