Estoy tratando de crear un contenedor de componentes para el componente Vuetify Stepper. Mi objetivo es simplemente crear un contenedor para poder aplicar algunas anulaciones de CSS.
Así que quiero transmitir todos los $attrs , $listeners , $slots .
No quiero cambiar ningún comportamiento/js.
Aquí está mi my-stepper.vue :
<template> <v-stepper v-bind="$attrs" v-on="$listeners"> <slot></slot> </v-stepper> </template> <script> export default { name: "my-stepper", inheritAttrs: false, }; </script> <style lang="scss"> // Fix issue with the vertical stepper component in vuetify .v-stepper.v-stepper--vertical .v-stepper__content.active > .v-stepper__wrapper { height: auto !important; // allow the active step to have automatic height (if child change) padding: 4px; // fix an overflow issue } </style>Yo uso este componente como:
<my-stepper vertical v-model="currentStepNumber" elevation="0">...</my-stepper> Pero ahora, cuando uso my-stepper , aparece el siguiente error en Chrome:
[Vuetify] [BREAKING] '@input' has been removed, use '@change' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide .
Este error desaparece cuando elimino v-on="$listeners" pero lo necesito para transmitir los eventos. ¿No es así?
Se agradece cualquier ayuda o propuesta para un contenedor de componentes simple.
v-model es solo un azúcar sintáctico para @input + :value .
De los documentos: https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
<input v-model="searchText">hace lo mismo que:
<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>Encontré una solución válida a mi problema. En mi componente contenedor, en la sección de secuencias de comandos, necesitaba agregar un objeto model para especificar el nombre del event (de input predeterminada para change ):
export default { name: "vertical-stepper", inheritAttrs: false, model: { prop: "value", event: "change", }, }; </script>Esto se refiere a la personalización del modelo v del componente en los documentos.