Shulou(Shulou.com)06/01 Report--

This article mainly introduces the Vant UI van-collapse drop-down folding panel default to expand the first example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Problem recurrence

Recently, when working on a project, there is a requirement that the first item of the van-collapse drop-down folding panel is expanded by default. I used the Vant UI component and first introduced it directly according to the official website document:

Make a visit plan, insurance guarantee analysis, production plan, living room explanation and revision notes.

Modify remarks

Export default {data () {return {activeNames: ['1'],};},}

By default, each item is not expanded:

Demand realization

First, take a look at the official document Collapse Props:

Parameter description Type default value v-model accordion mode of the currently expanded panel name: number | string

Non-accordion mode: (number | string) []-whether accordion turns on accordion mode whether booleanfalseborder displays the outer frame booleantrue

Through the official documentation, we can know that the v-model property of van-collapse binds the name value of the current expansion panel van-collapse-item, and my drop-down panel parent is traversed, so the name value uses a dynamic subscript of the numbers 0, 1, 2, and 3.

Whether the accordion mode is turned on or not determines the type of v-model attribute value.

In non-accordion mode: v-model is an array, so we want the first item, that is, a folding item with a name value of 0, to be expanded by default. When activeNames is passed into data, it should be formatted as an array and the default value is 0, but note that it is [0] rather than ["0"]:

Export default {data () {return {activeNames: [0],};},}

The first item expands by default:

Accordion mode: the v-model attribute value type is a number or a string, so we can change the activeNames in data to a number or a string

Export default {data () {return {activeNames: 0,};},}

The effect can be achieved.

Attachment: the van-collapse of vant cannot expand a solution by default

Name unique identifier. Default is index value number | string index

The name accordion mode of v-model 's current expansion panel: number | string

Non-accordion mode: (number | string) []

But when I use it, activeNames: ['0'] Life or death doesn't work, then change it to [0].

Export default {data () {return {activeNames: [0] / / cannot be ['0']}} Thank you for reading this article carefully. I hope the article "van-collapse drop-down folding panel in Vant UI launches the first example analysis by default" shared by the editor is helpful to you. At the same time, I hope you can support me and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.