Как передать пользовательский ввод и обновить данные с помощью Vue-SweetAlert2 - PullRequest
Новая
       13

Как передать пользовательский ввод и обновить данные с помощью Vue-SweetAlert2

0 голосов
/ 01 июля 2019

В настоящее время я пытаюсь создать кнопку «Создать», которая вызывает всплывающее окно с вводом пользовательского текста, как показано на рисунке ниже.

popup

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

Test result of createCustomer: Shinichi

Но в действительности отображается жестко закодированный объект, который определяется в методе alertDisplay () в приведенном ниже коде. 

Test result of createCustomer: { "params": { "title": "What is your Name?", "input": "text", "inputPlaceholder": "Enter your name here", "showCloseButton": true } }

ObjectDisplayed

<template>
      <v-btn class="create-button" color="yellow" @click="alertDisplay">Create</v-btn>

    <br/>

    <p>Test result of createCustomer: {{ createdCustomer }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        createdCustomer: null
      }
    },
    methods: {
      alertDisplay() {
        var customer = this.$swal({
                          title: 'What is your Name?',
                          input: 'text',
                          inputPlaceholder: 'Enter your name here',
                          showCloseButton: true,       
                        });
        console.log(customer);
        this.createdCustomer = customer; 
      }
    }
  }
</script>

Как передать имя и отобразить его на экране вместо объекта, как на прикрепленном изображении?

1 Ответ

0 голосов
/ 01 июля 2019

Вы должны использовать обещания, чтобы получить пользовательский ввод модальности swal. 

async alertDisplay() {
    let customer = await this.$swal({
        title: 'What is your Name?',
        input: 'text',
        inputPlaceholder: 'Enter your name here',
        showCloseButton: true,       
    });
    console.log(customer)
}

Вы можете увидеть это в этом Codepen, найденном в документации: https://codepen.io/pen/?&editable=true

...