\n\n To add a dialog of type prompt we have a global function a completely independent component vs-prompt. This allows more flexibility with the input and ability to add any type of input and components
\n\n \n The properties of the component are equivalent to those of the global function only with the vs before each property something like\n \n
\n\n \n
Run prompt\n
Run prompt inputs\n
Security Code: {{ val == null ? 'null' : val }}
\n
\n Name: {{valMultipe.value1}} |\n Last Name: {{valMultipe.value2}}\n
\n\n
\n Enter the security code\n \n
\n \n\n \n \n Enter your first and last name to continue.\n \n \n\n \n Fields can not be empty please enter the data\n \n
\n \n\n \n<template>\n <div class="demo-alignment">\n <vs-button @click="activePrompt = true" color="primary" type="border">Run prompt</vs-button>\n <vs-button @click="activePrompt2 = true" color="primary" type="border">Run prompt inputs</vs-button>\n <div class="op-block">Security Code: {{ \"\\{\\{ val == null ? 'null' : val \\}\\}\" }} </div>\n <div class="op-block">\n Name: {{ \"\\{\\{ valMultipe.value1 \\}\\}\" }} | Last Name: {{ \"\\{\\{ valMultipe.value2 \\}\\}\" }}\n </div>\n\n </div>\n\n <vs-prompt\n @cancel="val=''"\n @accept="acceptAlert"\n @close="close"\n :active.sync="activePrompt">\n <div class="con-exemple-prompt">\n <span>Enter the security code</span>\n <vs-input placeholder="Code" vs-placeholder="Code" v-model="val" class="mt-3 w-full" />\n </div>\n </vs-prompt>\n\n <vs-prompt\n @cancel="clearValMultiple"\n @accept="acceptAlert"\n @close="close"\n :is-valid="validName"\n :active.sync="activePrompt2">\n <div class="con-exemple-prompt">\n Enter your first and last name to <b>continue</b>.\n <vs-input placeholder="Name" v-model="valMultipe.value1" class="mt-4 mb-2 w-full" />\n <vs-input placeholder="Last Name" v-model="valMultipe.value2" class="w-full" />\n\n <vs-alert :vs-active="!validName" color="danger" vs-icon="new_releases" >\n Fields can not be empty please enter the data\n </vs-alert>\n </div>\n </vs-prompt>\n</template>\n\n<script>\nexport default {\n data(){\n return {\n activePrompt:false,\n activePrompt2:false,\n val:'',\n valMultipe:{\n value1:'',\n value2:''\n },\n }\n },\n computed:{\n validName(){\n return (this.valMultipe.value1.length > 0 && this.valMultipe.value2.length > 0)\n }\n },\n methods:{\n acceptAlert(){\n this.$vs.notify({\n color:'success',\n title:'Accept Selected',\n text:'Lorem ipsum dolor sit amet, consectetur'\n })\n },\n close(){\n this.$vs.notify({\n color:'danger',\n title:'Closed',\n text:'You close a dialog!'\n })\n },\n clearValMultiple() {\n this.valMultipe.value1 = "";\n this.valMultipe.value2 = "";\n }\n }\n}\n</script>\n \n\n \n