网站空间租用价格,如何制作课程网站模板,郑州服装网站建设公司,甘肃住房和城乡建设部网站文章目录 一、问题二、解决三、最后 一、问题
element中的el-select的v-model一般都是字符串或者字符串数组#xff0c;但是有些时候后端接口要求该字段要传对象或者对象数组#xff0c;如果再转换一次数据#xff0c;对于保存配置和回显都是吃力不讨好的事情。如下所示但是有些时候后端接口要求该字段要传对象或者对象数组如果再转换一次数据对于保存配置和回显都是吃力不讨好的事情。如下所示
templateel-selectmultipleclearablefilterablev-modelselectel-optionv-foritem in options:keyitem.nodeId:labelitem.nodeName:valueitem.nodeId//el-select
/template
script
export default {data() {return {select: [],options: [{nodeId: node_135061771075,nodeName: 审批人1},{nodeId: node_404274216403,nodeName: 审批人2}]}}
}
/script选中后的数据select为
[node_135061771075, node_404274216403]但是想实现的是select值为
[{nodeId: node_135061771075,nodeName: 审批人1},{nodeId: node_404274216403,nodeName: 审批人2}
]这时如果把el-option的value改成item
el-optionv-foritem in options:keyitem.nodeId:labelitem.nodeName:valueitem
/结果发现竟然会报错
transition-group children must be keyed: ElTag二、解决
指定el-select的value-key属性。官网的说法如果 Select 的绑定值为对象类型请务必指定 value-key 作为它的唯一性标识。点击【跳转】访问官网 templateel-selectmultipleclearablefilterablevalue-keynodeIdv-modelselectel-optionv-foritem in options:keyitem.nodeId:labelitem.nodeName:valueitem//el-select
/template
script
export default {data() {return {select: [],options: [{nodeId: node_135061771075,nodeName: 审批人1},{nodeId: node_404274216403,nodeName: 审批人2}]}}
}
/scriptel-select设置好value-key后页面不会报错而且数据也是返回如下正确格式
[{nodeId: node_135061771075,nodeName: 审批人1},{nodeId: node_404274216403,nodeName: 审批人2}
]三、最后
本人每篇文章都是一字一句码出来希望大佬们多提提意见。顺手来个三连击点赞收藏关注✨。打气加油☕