Soy un desarrollador de ASL.NET Core y trato de usar vuejs para crear algunos formularios complejos. Para aprender a usarlo, creo archivos html estáticos para comprender cómo funcionan los componentes en vuejs. Tengo el siguiente ejemplo:
<!DOCTYPE html> <html lang="en"> <head> <title>Vue 4 Tutorial</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/vuejs-datepicker"></script> <script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css"> <script> const app = Vue.createApp({ data: () => ({ example1: { value: 0, options: ['Batman', 'Robin', 'Joker'] } }), template: `<h2>Hello with Vue CDN</h2> <vuejs-datepicker></vuejs-datepicker> <div class="example"> <h3 id="example-1">#1 - Single select</h3> <div class="output">Data: {{ example1.value }}</div> <Multiselect v-model="example1.value" v-bind="example1"></Multiselect> </div>` }); app.component('Multiselect', VueformMultiselect) app.mount("#app") </script> </body> </html>En este ejemplo, uso CDN para vuejs 3, vuejs-datepicker y multiselect. Hice que el componente de selección múltiple funcione con el comando app.component('Multiselect', VueformMultiselect). Puedo entenderlo porque abrí el archivo js y encontré el siguiente código
var VueformMultiselect=function(e,t).......Esto tiene como resultado agregar un componente usando el objeto VueformMultiselect.
Revisé el código vuejs-datepicker y no encuentro algo similar para declararlo en mi aplicación. ¿Alguien puede ayudarme a declarar el componente vuejs-datepicker para mi código?
Gracias
No puede usar vuejs-datepicker en Vue3, puede probar con vue3datepicker :
<div id="app"></div> <script src="https://unpkg.com/vue@next"></script> <script src="https://unpkg.com/vue3-date-time-picker@latest/dist/vue3-date-time-picker.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vue3-date-time-picker@latest/dist/main.css"> <script type="text/javascript" src="https://unpkg.com/@vueform/multiselect"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@vueform/multiselect/themes/default.css"> <script> const app = Vue.createApp({ data: () => ({ example1: { value: 0, options: ['Batman', 'Robin', 'Joker'], }, selDate: null }), components: { Datepicker: Vue3DatePicker, Multiselect: VueformMultiselect }, template: `<h2>Hello with Vue CDN</h2> <datepicker v-model="selDate"></datepicker> <div class="output">Data: {{ selDate }}</div> <div class="example"> <h3 id="example-1">#1 - Single select</h3> <div class="output">Data: {{ example1.value }}</div> <Multiselect v-model="example1.value" v-bind="example1"></Multiselect> </div>` }); app.mount("#app") </script>