1

Есть родительский компонент, в котором строится таблица при помощи данных полученных из БД при помощи использования такого хука:

created: function () {this.getPacts();},

код метода getPacts такой:

getPacts: function () {
  axios
   .get('/pact/get-pacts', {timeout: 2000})
   .then(response => {
     this.loadData = response.data.data
    })
    .catch(error => {
     console.log(JSON.stringify(error))
    })
  },

свойство this.loadData прописано так:

data: function () {
  return {
    loadData: [],
    operators: [],
    isActiveDeletePactModal: false,
    isActiveAddPactModal: false,
    isActiveUpdatePactModal: false,
    indexDeletedPact: 0,
    indexUpdatedPact: 0,
   }
 },

Есть дочерний компонент - модальное окно. Используется для записи данных в БД. Мне нужно, чтобы после закрытия модального окна, отправлялся запрос в БД, для обновления таблицы в родительском элементе. Я сделал генерацию события при закрытии модального окна и в родительском компоненте прописал отлов этого события, но он не отрабатывает.

Вот так прописано в дочернем компонете:

methods: {
  closeModal: function () {
     this.$emit('reload');
     this.$parent.isActiveAddPactModal = false;
     this.clearAllData();
    },
  }

Вот так прописано в родительском компоненте:

<h2 class="main-color active-element" @reload="getPacts">Перелік договорів</h2>

В итоге: метод getPacts даже не вызывается.

В чем может быть проблема?

2
  • Пока для решения вопроса отслеживаю флаг состояния модального окна через watch, если он меняется на false, запускаю обновление родительского компонента. Вот так watch: { isActiveAddPactModal: function (val) { if (val === false) { this.getPacts(); } } }, 13 фев 2020 в 15:14
  • Но вопрос не закрыт. как можно это сделать проще? 13 фев 2020 в 15:15

2 ответа 2

0

Вы отслеживаете событие reload, на нативном тэге h2. У этого тэга нет такого события. Событие которое эммитит дочерние компонент необходимо отслеживать непосредственно на нем. Если же Вы назвали компонент именем, которое совпадает с именем нативного тэга, то нужно поменять имя

0

Вероятно вы неправильно используете метод closeModal в дочернем компоненте. Посмотрите пример реализации подобной задачи в подготовленном для вас примере: Пример пользовательского события во Vue.

При подготовке ответа, использовалась информация из официальной документации Vue - Пользовательские события Vue, Компоненты Vue.

1
  • 1
    Этот вариант отработал. Спасибо. 21 фев 2020 в 16:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.