Vue.js Vue公式-组项可折叠/切换折叠

是否有可能使组项可折叠

<FormulateInput type="group" name="employments" :repeatable="true" label="Employments"
    add-label="+ Add Employment" #default="groupProps">
    <!-- Clickable area -->
    <div class="group text-sm font-semibold py-2 cursor-pointer relative" @click="groupProps.showForm">
        ....
    </div>
    <!-- Nested form: must be collapsible accordion -->
    <div class="nested-form" v-show="groupProps.showForm">
        ....
    </div>
</FormulateInput>

....
....

我想将

showForm

属性添加到组上下文中

为此，我需要自定义输入类型，还是有其他方法

如果有人有其他想法

---

谢谢

我是根据这本书的要点想出来的

CollapsableGroupItem.vue：

<template>
    <div class="group-item" :data-is-open="itemId === showIndex">
        <div class="group group-item-title text-sm font-semibold py-2 cursor-pointer relative hover:text-blue-400" @click="toggleBody">
            <slot name="title" v-bind="groupItem">#{{ context.index }}</slot>
        </div>
        <div class="group-item-body" v-show="itemId === showIndex">
            <slot name="body">
                <FormulateInput type="pelleditor" name="description" label="Description"/>
            </slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "CollapsableGroupItem",
    props: {
        context: {
            type: Object,
            required: true,
        },
        showIndex: {
            type: [Number, String],
            required: true,
        },
        groupItem: {
            type: Object,
            required: true,
        },
    },
    data () {
        return {
            itemId: this.context.name + this.context.index
        }
    },
    created: function () {
        // show current item
        this.$emit("open", this.itemId);
    },
    methods: {
        toggleBody() {
            if (this.itemId === this.showIndex) {
                // dont show anything
                this.$emit("open", -1);
            } else {
                // show this one
                this.$emit("open", this.itemId);
            }
        },
    }
};

<CollapsableGroupItem
    :context="context"
    :show-index="showIndex"
    :group-item="educations[context.index]"
    @open="showIndex = $event"
>   
    <template v-slot:title="education">
        <span v-if="education.institution || education.degree"
        >   
            {{ education.institution }}
            <span v-if="education.institution && education.degree">at</span>
            {{ education.degree }}
        </span>
        ...
    </template>
    <template v-slot:body>
        ...
    </template>
</CollapsableGroupItem>

#{{context.index}
导出默认值{
名称：“CollapsableGroupItem”，
道具：{
背景：{
类型：对象，
要求：正确，
},
显示索引：{
类型：[数字，字符串]，
要求：正确，
},
分组项目：{
类型：对象，
要求：正确，
},
},
数据（）{
返回{
itemId:this.context.name+this.context.index
}
},
已创建：函数（）{
//显示当前项目
this.$emit（“打开”，this.itemId）；
},
方法：{
toggleBody（）{
if（this.itemId==this.showIndex）{
//什么都不要展示
这是.$emit（“打开”，-1）；
}否则{
//展示这个
this.$emit（“打开”，this.itemId）；
}
},
}
};

FormTemplate.vue：

<template>
    <div class="group-item" :data-is-open="itemId === showIndex">
        <div class="group group-item-title text-sm font-semibold py-2 cursor-pointer relative hover:text-blue-400" @click="toggleBody">
            <slot name="title" v-bind="groupItem">#{{ context.index }}</slot>
        </div>
        <div class="group-item-body" v-show="itemId === showIndex">
            <slot name="body">
                <FormulateInput type="pelleditor" name="description" label="Description"/>
            </slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "CollapsableGroupItem",
    props: {
        context: {
            type: Object,
            required: true,
        },
        showIndex: {
            type: [Number, String],
            required: true,
        },
        groupItem: {
            type: Object,
            required: true,
        },
    },
    data () {
        return {
            itemId: this.context.name + this.context.index
        }
    },
    created: function () {
        // show current item
        this.$emit("open", this.itemId);
    },
    methods: {
        toggleBody() {
            if (this.itemId === this.showIndex) {
                // dont show anything
                this.$emit("open", -1);
            } else {
                // show this one
                this.$emit("open", this.itemId);
            }
        },
    }
};

<CollapsableGroupItem
    :context="context"
    :show-index="showIndex"
    :group-item="educations[context.index]"
    @open="showIndex = $event"
>   
    <template v-slot:title="education">
        <span v-if="education.institution || education.degree"
        >   
            {{ education.institution }}
            <span v-if="education.institution && education.degree">at</span>
            {{ education.degree }}
        </span>
        ...
    </template>
    <template v-slot:body>
        ...
    </template>
</CollapsableGroupItem>

{{教育机构}
在
{{education.degree}}
...
...

也许它会帮助其他人，或者在本例中很有用：