Vuetify stepper simple component wrapper v-on="$listeners" error-CodePudding

I'm trying to create a component wrapper for the Vuetify Stepper component. My goal is to simply create a wrapper so that I can apply some CSS overrides.

So I want to pass down all the $attrs, $listeners, $slots.

I don't want to change any behavior/js.

Here is my 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>

I use this component like:

<my-stepper vertical v-model="currentStepNumber" elevation="0">...</my-stepper>

But now, when I use my-stepper I got the following error in 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.

This error disappears when I remove the v-on="$listeners" but I need it to pass down the events. Don't I?

Any help or proposal for a simple component wrapper is appreciated.

CodePudding user response：

v-model is just a syntactic sugar for @input :value.

From the docs: https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

<input v-model="searchText">

does the same thing as:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

CodePudding user response：

I found a valid soution to my issue. In my wrapper component, in the script section I needed to add a model object to specify the event name (from default being input to change):

export default {
  name: "vertical-stepper",
  inheritAttrs: false,
  model: {
    prop: "value",
    event: "change",
  },
};
</script>

This refers to Customizing the Component v-model in the docs.