Ясное тело модстрала начальной загрузки на скрытом - PullRequest
Новая
       27

Ясное тело модстрала начальной загрузки на скрытом

0 голосов
/ 10 февраля 2019

У меня есть приложение Nuxt, которое использует загрузчик Vue.

У меня есть повторно используемый компонент для Modal

компоненты / BaseModal.vue 

<template>
  <b-modal id="base_modal" :title="title" size="md" @hidden="hide">
    <slot name="body"></slot>
    <hr>    
    <BaseButton class="btn" variant="outline-secondary" @click="close" buttonText="Cancel"/>      
    <slot name="footer"></slot>
  </b-modal>
</template>

<script>
export default {
  name: 'BaseModal',
  props: {
    title: { type: String, required: true },
    size: { type: String, default: "lg" }
  }, 
  methods: {  
    close() {
      this.$root.$emit('bv::hide::modal', 'base_modal');
    }, 
    hide() {
      // Clear slot body contents here
    }
  }
};
</script>

Я вызываю этот компонент путем рендеринга HTML-элементов с использованиемименованные области действия: 

<template>
  <BaseButton @click="showModal" buttonText="Show Modal"/>

  <BaseModal title="Add Recommendation" size="md">
    <div slot="body">
      <b-form @submit.prevent="submit" autocomplete="off">
        <b-card-body>
          <b-row>
            <b-col><BaseTextInput v-model.trim="name" label="Headline"/></b-col>
          </b-row>
        </b-card-body>
      </b-form>
    </div>
    <BaseButton class="float-right btn" variant="outline-primary" @click="submit" buttonText="Save" slot="footer"/>
  </BaseModal>
</template>

<script>
  export default {
    name: 'FormInput',
    data() {
      return {
        name: ""
      } 
    },
    methods: {
      showModal: {
        this.$root.$emit('bv::show::modal','base_modal');
      },
      submit() {
        // dispatch creation
      }
    }
  }
</script>

Как я могу сбросить / очистить содержимое тела модала, когда скрыто , чтобы при запуске showModal он снова рендерил содержимое?

1 Ответ

0 голосов
/ 10 февраля 2019

Могут быть рассмотрены следующие решения:

Вариант 1: вывести событие из модального компонента

1) после закрытия модального объекта вывести пользовательское событие в компоненте Modal:

Modal.vue 

<template>
  <b-modal id="base_modal" title="Modal example" @hidden="hide" >
    <slot name="body"></slot>
    <slot name="footer"></slot>
  </b-modal>
</template>

<script>
export default {
  name: "BaseModal",
  methods: {
    hide() {
      this.$emit('hide')
    }
  }
};
</script>

2) затем в родительском компоненте при запуске события hide значения формы можно очистить следующим образом:

App.vue 

<template>
  <div>
    <b-button @click="showModal" ref="btnShow">Open Modal</b-button>
    <ModalExample @hide="hideModal">
      <div slot="body">
        <form @submit.stop.prevent="handleSubmit">
          <b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input>
        </form>
      </div>
    </ModalExample>
  </div>
</template>

<script>
import ModalExample from "./components/ModalExample.vue";

export default {
  components: {
    ModalExample
  },
  data() {
    return {
      name: ""
    };
  },
  methods: {
    showModal() {
      this.$root.$emit("bv::show::modal", "base_modal");
    },
    hideModal() {
      this.name = ''; //clear form values
    }
  }
};
</script>

Вот демонстрационная версия , которая демонстрирует этот подход.

Вариант 2: использовать слоты с областью действия

Модальный компонент может получить доступ к данным через слоты с областью действия :

ModalExample.vue 

<template>
  <b-modal id="base_modal" title="Modal example" @hidden="hide" >
    <slot :formData="formData" name="body"></slot>
    <slot name="footer"></slot>
  </b-modal>
</template>

<script>
export default {
  name: "ModalExample",
  data() {
    return {
      formData : {}
    }
  },
  methods: {
    hide() {
      //clear form fields
      for (const name of Object.keys(this.formData)) {
        this.formData[name] = ""
      }
    }
  }
};
</script>

App.vue 

<template>
  <div>
    <b-button @click="showModal" ref="btnShow">Open Modal</b-button>
    <ModalExample @hide="hideModal">
      <template slot="body" slot-scope="{formData}">
        <form @submit.stop.prevent="handleSubmit">
          <b-form-input
            type="text"
            placeholder="Enter your first name"
            v-model="formData.firstname"
          ></b-form-input>
          <b-form-input
            type="text"
            placeholder="Enter your last name"
            v-model="formData.lastname"
          ></b-form-input>
        </form>
      </template>
    </ModalExample>
  </div>
</template>

<script>
import ModalExample from "./components/ModalExample.vue";

export default {
  components: {
    ModalExample
  },
  data() {
    return {
    };
  },
  methods: {
    showModal() {
      this.$root.$emit("bv::show::modal", "base_modal");
    }
  }
};
</script>
...