Vuesax: I want to display multiple inputs with Prompt

Created on 7 Jun 2018  路  8Comments  路  Source: lusaxweb/vuesax

prompt(){
      this.$vs.prompt({
        title:'Dialog Confirm Default',
        text:'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
        color:'primary',
        input:{
          placeholder:'Name',
          value:this.val,
          maxLength:20,
          type:'text'
        },
        input:{
          placeholder:'Name',
          value:this.val,
          maxLength:20,
          type:'text'
        },
      })
   }

or

prompt(){
      this.$vs.prompt({
        title:'Dialog Confirm Default',
        component: 'MyForm',
        color:'primary',
        input:{
          placeholder:'Name',
          value:this.val,
          maxLength:20,
          type:'text'
        },
        input:{
          placeholder:'Name',
          value:this.val,
          maxLength:20,
          type:'text'
        },
      })
   }
enhancement good first issue help wanted

Most helpful comment

Ready the component was raised completely different to improve the use and operation I hope you like it as I thank you very much for the contribution of all, @dasisyouyu @Pitu please review and tell me if it works as I should thank you

https://lusaxweb.github.io/vuesax/components/dialog.html

To implement several input or how many you need it would be in this way

     <vs-dialog
      @vs-cancel="valMultipe.value1='',valMultipe.value2=''"
      vs-type="prompt"
      @vs-accept="acceptAlert"
      :vs-is-valid="validName"
      :vs-active.sync="activePrompt2">
       Enter your first and last name to continue
       <div slot="input">

         <vs-input vs-placeholder="Name" v-model="valMultipe.value1"/>
         <vs-input vs-placeholder="Last Name" v-model="valMultipe.value2"/>

         <vs-alert :vs-active="!validName" vs-color="danger" vs-icon="new_releases" >
           Fields can not be empty please enter the data
         </vs-alert>
       </div>
     </vs-dialog>

All 8 comments

Would you like to do a PR on this, it is very good contribution thanks

yes, I will send PR so little later.

I believe having multiple input properties should be avoided and instead group them in an array like so:

prompt(){
    this.$vs.prompt({
        title:'Dialog Confirm Default',
        component: 'MyForm',
        color:'primary',
        input: [
            {
                placeholder: 'Name',
                value: this.name,
                maxLength: 20,
                type: 'text'
            },
            {
                placeholder: 'Last name',
                value: this.lastName,
                maxLength: 20,
                type: 'text'
            }
        ]
    })
}

As well as sending both values to the confirm and cancel methods.

@Pitu exactly! I presented is bad code.

but, I think that the following is better.

```js
prompt(){
this.$vs.prompt({
title:'Dialog Confirm Default',
color:'primary',
input: {
component: 'MyForm'
}
})
}

Ready the component was raised completely different to improve the use and operation I hope you like it as I thank you very much for the contribution of all, @dasisyouyu @Pitu please review and tell me if it works as I should thank you

https://lusaxweb.github.io/vuesax/components/dialog.html

To implement several input or how many you need it would be in this way

     <vs-dialog
      @vs-cancel="valMultipe.value1='',valMultipe.value2=''"
      vs-type="prompt"
      @vs-accept="acceptAlert"
      :vs-is-valid="validName"
      :vs-active.sync="activePrompt2">
       Enter your first and last name to continue
       <div slot="input">

         <vs-input vs-placeholder="Name" v-model="valMultipe.value1"/>
         <vs-input vs-placeholder="Last Name" v-model="valMultipe.value2"/>

         <vs-alert :vs-active="!validName" vs-color="danger" vs-icon="new_releases" >
           Fields can not be empty please enter the data
         </vs-alert>
       </div>
     </vs-dialog>

I will test this tonight and let you know, thanks for the hard work!

Thank you for using Vuesax and contributing in the

Awesome job ty!

Was this page helpful?
0 / 5 - 0 ratings