Динамический контент с v-show в поповере Bootstrap vue - PullRequest
Новая
       18

Динамический контент с v-show в поповере Bootstrap vue

0 голосов
/ 07 сентября 2018

Я изо всех сил пытаюсь показать динамический контент внутри моего поповера, созданного с помощью компонента Bootstrap Vue.

Сначала я хочу показать форму, а когда она успешно отправлена, вместо нее я хочу показать текст подтверждения.

Я пытался справиться с этим с помощью директивы v-show в контенте поповера, но безуспешно. Конечно, все отображается вне div с помощью директивы v-show.

В результате он просто показывает пустой поповер (за исключением ссылки закрытия) внутри него.

Вот мой компонент: 

<template>
  <div class="email-content">
    <div class="email-content__buttons">
      <b-button variant="blue" class="fv-round" id="testEmailSend" :disabled="isPopoverDisplayed" @click="isPopoverEmailFormDisplayed = true">{{locales.testButton}}</b-button>
      <b-popover target="testEmailSend"
                 :show="isPopoverDisplayed"
                 placement="auto"
                 @show="isPopoverEmailFormDisplayed = true"
                 @shown="setFocusOnPopoverForm">
        <template>
          <b-btn @click="isPopoverEmailFormDisplayed = false" class="close">
            <span class="d-inline-block">&times;</span>
          </b-btn>
        </template>
        <div v-show="isPopoverConfirmationDisplayed">
          <b-form-group :label="`${locales.sendTo} :`" label-for="popoverEmailForm" class="mb-1" :invalid-feedback="locales.emailMandatory">
            <b-input-group>
              <b-form-input ref="emailTestReceiver" id="popoverEmailForm" :validationState="$v.emailTestReceiver" size="sm" v-model="emailTestReceiver"></b-form-input>
              <b-input-group-append>
                <b-btn @click="sendEmailTest" size="sm" :disabled="$v.$invalid" variant="primary">Ok</b-btn>
              </b-input-group-append>
            </b-input-group>
          </b-form-group>
        </div>
      </b-popover>
      <div v-show="isPopoverConfirmationDisplayed" placement="auto">
        {{locales.emailSentConfirmation}}
      </div>
      <b-button variant="primary" class="fv-round" @click="saveTemplates">{{locales.saveButton}}</b-button>
    </div>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex';
  import { required, email } from 'vuelidate/lib/validators';
  import feedbackHandler from '@/components/_shared/Alerts/ErrorHandler';
  import SellerEmailContentConfig from '@/components/SellerDashboard/SellerEmail/SellerEmailContent/SellerEmailContentConfig';
  import locales from './sellerEmailContent.locales.json';

  export default {
    name: 'SellerEmailContent',
    data() {
      return {
        locales,
        emailTestReceiver: '',
        isPopoverEmailFormDisplayed: false,
        isPopoverConfirmationDisplayed: false
      }
    },
    validations: {
      emailTestReceiver: {
        required,
        email
      }
    },
    computed: {
      isPopoverDisplayed() {
        return this.isPopoverEmailFormDisplayed || this.isPopoverConfirmationDisplayed;
      }
    },
    methods: {
      ...mapActions({
        sendEmail: 'sendAuthCustomEmail'
      }),
      async sendEmailTest() {
        const { error: errorSending } = await this.sendEmail({ type: 'Seller', email: this.emailTestReceiver });
        if (!errorSending) {
          this.isPopoverEmailFormDisplayed = false;
          this.isPopoverConfirmationDisplayed = true;
          setTimeout(() => { this.isPopoverConfirmationDisplayed = false }, 3000);
        } else feedbackHandler.showError(errorSending);
      },
      setFocusOnPopoverForm() {
        this.$refs.emailTestReceiver.focus();
      }
    },
  }
</script>

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

Есть идеи? Должно быть, я что-то пропустил:)

...