求助！关于vue 遍历生成数据

Question

现在的场景是，前端需要后端返回的数据 动态的生成表单
我用的框架是vant
需要用到vant的picker这个组件，

vant popup 这个组件上需要绑定v-model
这个值我data里是没有的，就会报错
我在data return {}里加个showPicker:true，
那遍历出来的组件都会用到showPicker,
就会导致后面的弹出层覆盖前面的。

好迷茫~~！ 小白求助~！

<template v-for="sitem in item.fields">
                        
    <template v-if="sitem.type === 1">
        <van-field 
            :key="sitem.id" 
            :label="sitem.title" 
            v-model="formdata[sitem.name]" 
            :text="'请输入' + sitem.title" 
            v-if="sitem.is_display" 
        />
    </template>
                        
    <template v-if="sitem.type === 2">
        <van-field 
            :key="sitem.id" 
            readonly 
            clickable 
            :label="sitem.title" 
            :value="formdata[sitem.name]" 
            v-if="sitem.is_display"
            @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
            <van-picker 
                show-toolbar
                :key="sitem.id"
                :columns="sitem.values" 
                @cancel="showPicker = false" 
                @confirm="onConfirm" 
            />
        </van-popup>
    </template>

export default {
    data(){
        return {
            formdata:{}
        }
    }
}

Answer 1

vue操作每个item中的相同控件显示隐藏，需要给每个item加个参数，比如：active,默认设置false,点击每个元素改变当前item中的active为true;

var list= [];
···
list.forEach(val => {
    this.$set(val,'active',false);//要用set不然视图不更新
})
···
<div  @click=click(item)>
    <van-popup v-model="item.active">
</div>
...
click(item){
    //如果需要关闭兄弟组件遍历list将所有的active先置为false
    
    item.active = !item.active;
}

就是这么个思路