7***@qq.com
7***@qq.com
  • 发布:2024-09-27 14:51
  • 更新:2024-09-27 15:55
  • 阅读:217

表单v-model绑定的数据名称,如何动态设置

分类:uni-app x

<uni-forms ref="baseForm" :modelValue="baseFormData" @submit="formSubmit" @reset="formReset" labelWidth="80px">
<view v-for="item in filedData" :key="item.ffid">
<uni-forms-item :label="item.falias" required >
<uni-easyinput :v-model="item.model" placeholder="请输入..." />
</uni-forms-item>
</view>
</uni-forms>

<script>
export default {
data() {
return {
filedData: [],
baseFormData: [] // 表单数组绑定对象
}
}
</script>

常规表单的绑定是这样写的: v-model = "baseFormData.username"
但是,我想动态设置绑定的参数名称时, item.model = "baseFormData.username";
像上面的写法,无法实现这个绑定效果,数据无法获取

求救大神,新手搞不定这个表单了

2024-09-27 14:51 负责人:无 分享
已邀请:
BeardYound

BeardYound

:v-model="item.model"这个时候读出来的是个字符串或者undefined,换个写法

  • 7***@qq.com (作者)

    您好,感谢您的回复。

    我的意思是,通过filedData的变量,使其绑定到另外一个数据对象baseFormData.username。

    通过您的那个测试方法,一样无法完成,。。

    它仍然会绑定到filedData的变量上去,

    不过让我想通了一件事!把俩数据融合在一起,我在filedData里创建一个filedData.username,后续再分离出来就好了~

    2024-09-27 15:35

BeardYound

BeardYound

如果是动态对象就这样写

杨杨得亿

杨杨得亿 - 这个人很懒,什么都没有留下~

Obj可以使用键值对的方式取值,也可以使用数组方式取值,例如Obj [ item ] = xxxx

BeardYound

BeardYound

不确定你是不是需要这样的需求

7***@qq.com

7***@qq.com (作者)

解决好了

filedData的数据格式:
{ffid: 58, falias: '采购标题', fclass: 1, fdefault: '', value: '', …}
{ffid: 59, falias: '供应商名称', fclass: 16, fdefault: '', value: '', …}
{ffid: 60, falias: '产品详情', fclass: 19, fdefault: '', value: '', …}
{ffid: 61, falias: '总金额', fclass: 14, fdefault: '', value: '', …}
{ffid: 62, falias: '附件', fclass: 15, fdefault: '', value: '', …}
{ffid: 63, falias: '备注', fclass: 5, fdefault: '', value: '', …}
{ffid: 64, falias: '付款状态', fclass: 8, fdefault: '0', value: '', …}
{ffid: 66, falias: '已付金额', fclass: 14, fdefault: '', value: '', …}
{ffid: 68, falias: '是否入库', fclass: 8, fdefault: '0', value: '', …}

// 这是服务器端加载过来的表单字段数据,通过这些数据,再进行表单渲染,同时把用户输入的数据绑定到 filedData[index].value 里,后期提交表单的时候,就可以通过读取这个数组,把用户的数据分离出来。

<uni-forms ref="baseForm" :modelValue="baseFormData" @submit="formSubmit" @reset="formReset" labelWidth="80px">
<view v-for="item in filedData" :key="item.ffid">
<uni-forms-item :label="item.falias" required >
<uni-easyinput v-model="filedData[index].value" placeholder="请输入..." />
</uni-forms-item>
</view>
</uni-forms>

<script>
export default {
data() {
return {
filedData: []
}
}
</script>

7***@qq.com

7***@qq.com (作者)

只要能取到数据就行了

要回复问题请先登录注册