Vuetify: v-model looks deprecated

Question

I'm using Vuetify 1.0.14 to create my application. While I load a page though, I received this error message:

vuetify.js?dc48:19429 [Vuetify] v-model has been deprecated

found in

---> <VExpansionPanelContent>

Those are the lines of code this warning message refers to:

            <v-expansion-panel>
                <v-expansion-panel-content key="annotations" :value="sideFocusItem.default === 'annotations'">
                    <div slot="header">Annotations:</div>
                    <annotations v-if="loadAnnotationBuilder"></annotations>
                </v-expansion-panel-content>
            </v-expansion-panel>

I have some trouble figuring out where v-model is used and how it's possible that it has been deprecated. It's only a warning but how can I fix that?

Answer 1

This is a confusing warning, as Vue itself has not deprecated v-model. Looking at the Vuetify source, it looks like v-expansion-panel-content throws this warning when you pass it a value prop.

The documentation mentions you are supposed to use v-model and/or expand on the parent Expansion panel (instead of the panel content).

Expansion panels can be controlled externally by modifying the v-model. Its value corresponds to a zero-based index of the currently opened expansion panel content. If expand prop is used then it is an array of booleans where the index corresponds to the index of the content.

Here's a video that seems to solve the same problem you're running into.