Vue-formulate Group item可折叠/切换折叠

Question

是否有可能使组项目可折叠？

        ....
    
    
    
        ....

我想加一句showForm属性设置为组上下文。

为此，我需要做自定义输入类型，或者有其他方法吗？

如果有人有其他想法的话？

谢谢

Answer 1

我明白了这一点，大意是@jpschroeder..。

CollapsableGroupItem.vue

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);
            }
        },
    }
};
</code></pre>
<p><strong>FormTemplate.vue</strong>:</p>
<pre><code><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>
</code></pre>
<p>Maybe it will help someone else or will be useful ?</p>