Как динамически монтировать vue компонент с помощью реквизита - PullRequest
Новая
       35

Как динамически монтировать vue компонент с помощью реквизита

0 голосов
/ 21 марта 2020

Сценарий / контекст

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

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

Мне ясно, что это происходит потому, что компонент модели остается смонтированным в фоновом режиме (поэтому он просто скрыт). Я мог бы решить эту проблему путем «сброса» модальных данных при срабатывании функции переключения, но я думаю, что должен быть лучший способ.

У меня похожая проблема, когда я хочу получить данные в модальном режиме. В настоящее время я вызываю функцию fetch в смонтированном хуке модала. Так что в этом случае выборка происходит, когда родительский компонент монтирует модальный. Это не имеет смысла, так как следует (и каждый раз) извлекать, когда модальное окно открыто.

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

Снимок экрана enter image description here

Пример кода

Обзор: 

<template>
  <div>
    // mount of my modal component
    <example-modal
        :toggleConstant = modalToggleUuid
        :submitHandler = submitHandler />
    // The overview component HTML is here
    </div>
</template>

<script>
  export default {
    data() {
      return {
                modalToggleUuid: someUuid,
                someList: [],
            }
    },

    mounted() {

    },

    methods: {
          showModal: function() {
        EventBus.$emit(this.modalToggleUuid);
      },

            submitHandler: function(item) {
                this.someList.push(item);
            }
    }
  }
</script>

Модальный: 

<template>
  <div>
    <input v-model="item.type">
    <input v-model="item.name">
    <input v-model="item.location">
    </div>
</template>

<script>
  export default {
    data() {
      return {
                modalToggleUuid: someUuid,
                item: {},
            }
    },

    mounted() {
            // in some cases i fetch something here. The data should be fetched each time the modal is opened 
    },

    methods: {
          showModal: function() {
        EventBus.$emit(this.modalToggleUuid);
      },

            submitHandler: function(item) {
                this.someList.push(item);
            }
    }
  }
</script>

Вопрос

Как лучше всего разобраться с описанным выше сценарием?

  • Следует я монтирую модальный компонент динамически?
  • Правильно ли я монтирую компонент и должен ли я постоянно сбрасывать содержимое?

1 Ответ

1 голос
/ 21 марта 2020

Вы находитесь на правильном пути, и для достижения того, что вы хотите, вы можете подойти к этой проблеме с помощью решения v-if следующим образом - тогда хук mounted() будет запускаться каждый раз, когда вы переключаете модальный режим, и он также не будет присутствует в DOM, когда вы его не используете. 

<template>
  <div>
    // mount of my modal component
    <example-modal
      v-if="isShowModal"
      :toggleConstant="modalToggleUuid"
      :submitHandler="submitHandler"
    />
    // The overview component HTML is here
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowModal: false,
      modalToggleUuid: someUuid,
      someList: []
    };
  },

  mounted() {},

  methods: {
    showModal: function() {
      this.isShowModal = true;
    },

    submitHandler: function(item) {
      this.someList.push(item);
      this.isShowModal = false;
    }
  }
};
</script>
...