Estoy usando un v-stepper de Vuetify.
lo que quiero es:
click event si el formulario activo no es válido Me las arreglé para hacerlo, pero configurando el oyente de click en el elemento span :
<v-stepper-step :key="step.id" :step="step.id" :rules="[() => !!step.valid]" :editable="currentStepId !== step.id && currentStep.valid"> <span @click="headerClick" v-html="step.name"></span> </v-stepper-step>Esto funciona bien, el clic se cancela y eso es exactamente lo que quiero. Aquí hay una demostración en vivo con la que puede interactuar.
Mi problema es:
Solo funciona en la etiqueta, no en el área completa en la que se puede hacer clic.
Me gustaría que todo el botón paso a paso llame a este método. Pero si adjunto el oyente @click en el v-stepper-step , entonces es demasiado tarde, no puedo cancelar el evento de clic (haciendo e.stopPropagation ).
¿Hay alguna manera de hacerlo? código de demostración
¡Gracias!
No está un poco claro lo que quiere hacer exactamente, pero al hacer clic en @click en su totalidad, la función headerCLick se comporta exactamente como lo hace cuando el clic está en la etiqueta, pero puede hacer clic en cualquier parte del encabezado (que tomo por sentado es lo que quiere decir con "el área completa en la que se puede hacer clic").
<v-stepper-header @click="headerClick"> <template v-for="step in steps"> <v-stepper-step :key="step.id" :step="step.id" :rules="[() => !!step.valid]" edit-icon="$complete" :complete="currentStepId > step.id" :editable="currentStepId !== step.id && currentStep.valid"> <span class="v-stepper-step-clickable" v-html="step.name"></span> </v-stepper-step> <v-divider :key="`divider-${step.id}`" v-if="step.id < lastStep"></v-divider> </template> </v-stepper-header>