Как показать свежие модальные данные начальной загрузки при использовании Vue.js - PullRequest
Новая
       10

Как показать свежие модальные данные начальной загрузки при использовании Vue.js

0 голосов
/ 11 мая 2018

У меня есть таблица записей о наших клиентах (т.е. клиентах). Когда пользователь нажимает на них, он загружает модал начальной загрузки, который включает в себя данные клиента в форме. Затем пользователь может отредактировать и отправить форму.

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

Я нашел способ обойти это, как вы можете видеть в приведенном ниже коде, но он основывается на захвате события начальной загрузки 'show modal'. Есть ли более чистый способ сделать это с помощью Vue? Что-то, что сбрасывает данные в дочернем компоненте при выборе записи в родительском компоненте? 

    export default {
    props : [
        'client_id',
        'name',
        'job_code',
        'is_default'
    ],
    data() {
        return {
            localJobCode : '',
            localIsDefault : ''
        }
    },
    methods : {
        doSave() {
             // ....
        }
    },
    mounted() {
        let self = this;
        $(this.$refs.EditClientModal).on('show.bs.modal', function () {
            self.localJobCode = self.job_code;
            self.localIsDefault = self.is_default;
        });
    }
}

В шаблоне I модальный элемент имеет тег ref следующим образом: 

<div class="modal fade" id="edit-client-modal" tabindex="-1" ref="EditClientModal">

Как видите, я создаю локальную копию реквизита (потому что, очевидно, я не хочу изменять значение в дочернем элементе). Код в методе mounted() - это единственный способ обновления данных при каждом показе модального окна. Я что-то упустил?

1 Ответ

0 голосов
/ 11 мая 2018

Вы можете заключить модальный компонент в элемент div и привязать к нему уникальный ключ. При изменении ключа компонент будет воссоздан снова 

<div class="modal-wrapper" :key="client_id">
  <div class="modal fade" id="edit-client-modal" tabindex="-1" ref="EditClientModal">
  </div>
</div>
...