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