vform mobile 3不能渲染

yubaolee

环境：vue3+TS+vite+vant
问题描述：
html:

1. <vm-form-render  :form-json="frmContentData"
   
2.           :form-data="frmData" :option-data="optionData" ref="vFormRef"></vm-form-render>

复制代码

script:

1. const frmContentData: any = reactive({ widgetList: [], formConfig: {} });

复制代码

1. //OnMounted中获取API数据后：
   
2. Object.assign(frmContentData,  JSON.parse(response.result.frmContentData));

复制代码

启动后使用vue工具，vm-form-render数据都是正常的，但不能正常渲染界面：

admin已获得悬赏 200 威望

最佳答案

是的，Pro版本和Mobile版本的json文件不能通用。

• admin
• 发表于2023-03-17
• 详细答案 >

justin1024

异步获取数据以后，调用setFormJson渲染试

yubaolee

是不是PC的数据和mobile不能通用？？？

1. {
   
2.         "widgetList": [{
   
3.                 "type": "static-text",
   
4.                 "icon": "static-text",
   
5.                 "formItemFlag": false,
   
6.                 "options": {
   
7.                         "name": "statictext111193",
   
8.                         "columnWidth": "200px",
   
9.                         "hidden": false,
   
10.                         "textContent": "OpenAuth.Net问卷调查表",
    
11.                         "customClass": [],
    
12.                         "onCreated": "",
    
13.                         "onMounted": "",
    
14.                         "label": "static-text"
    
15.                 },
    
16.                 "id": "statictext111193"
    
17.         }, {
    
18.                 "type": "divider",
    
19.                 "icon": "divider",
    
20.                 "formItemFlag": false,
    
21.                 "options": {
    
22.                         "name": "divider102346",
    
23.                         "label": "",
    
24.                         "columnWidth": "200px",
    
25.                         "direction": "horizontal",
    
26.                         "contentPosition": "center",
    
27.                         "hidden": false,
    
28.                         "customClass": [],
    
29.                         "onCreated": "",
    
30.                         "onMounted": ""
    
31.                 },
    
32.                 "id": "divider102346"
    
33.         }, {
    
34.                 "type": "static-text",
    
35.                 "icon": "static-text",
    
36.                 "formItemFlag": false,
    
37.                 "options": {
    
38.                         "name": "statictext94178",
    
39.                         "columnWidth": "200px",
    
40.                         "hidden": false,
    
41.                         "textContent": "1. 您是从什么渠道了解到OpenAuth.Net？（竖排）",
    
42.                         "customClass": "",
    
43.                         "onCreated": "",
    
44.                         "onMounted": "",
    
45.                         "label": "static-text"
    
46.                 },
    
47.                 "id": "statictext94178"
    
48.         }, {
    
49.                 "type": "radio",
    
50.                 "icon": "radio-field",
    
51.                 "formItemFlag": true,
    
52.                 "options": {
    
53.                         "name": "radio63396",
    
54.                         "label": "radio",
    
55.                         "labelAlign": "",
    
56.                         "defaultValue": "",
    
57.                         "columnWidth": "200px",
    
58.                         "size": "",
    
59.                         "displayStyle": "block",
    
60.                         "buttonStyle": false,
    
61.                         "border": false,
    
62.                         "labelWidth": null,
    
63.                         "labelHidden": true,
    
64.                         "disabled": false,
    
65.                         "hidden": false,
    
66.                         "optionItems": [{
    
67.                                 "label": "掘金",
    
68.                                 "value": 1
    
69.                         }, {
    
70.                                 "label": "知乎",
    
71.                                 "value": 2
    
72.                         }, {
    
73.                                 "label": "搜索引擎",
    
74.                                 "value": 3
    
75.                         }, {
    
76.                                 "value": 4,
    
77.                                 "label": "其他"
    
78.                         }],
    
79.                         "required": false,
    
80.                         "validation": "",
    
81.                         "validationHint": "",
    
82.                         "customClass": [],
    
83.                         "labelIconClass": null,
    
84.                         "labelIconPosition": "rear",
    
85.                         "labelTooltip": null,
    
86.                         "onCreated": "",
    
87.                         "onMounted": "",
    
88.                         "onChange": "",
    
89.                         "onValidate": ""
    
90.                 },
    
91.                 "id": "radio63396"
    
92.         }, {
    
93.                 "type": "static-text",
    
94.                 "icon": "static-text",
    
95.                 "formItemFlag": false,
    
96.                 "options": {
    
97.                         "name": "statictext46881",
    
98.                         "columnWidth": "200px",
    
99.                         "hidden": false,
    
100.                         "textContent": "2. 您在产品开发中承担什么角色？（横排）",
     
101.                         "customClass": "",
     
102.                         "onCreated": "",
     
103.                         "onMounted": "",
     
104.                         "label": "static-text"
     
105.                 },
     
106.                 "id": "statictext46881"
     
107.         }, {
     
108.                 "type": "radio",
     
109.                 "icon": "radio-field",
     
110.                 "formItemFlag": true,
     
111.                 "options": {
     
112.                         "name": "radio113860",
     
113.                         "label": "radio",
     
114.                         "labelAlign": "",
     
115.                         "defaultValue": null,
     
116.                         "columnWidth": "200px",
     
117.                         "size": "",
     
118.                         "displayStyle": "inline",
     
119.                         "buttonStyle": false,
     
120.                         "border": false,
     
121.                         "labelWidth": null,
     
122.                         "labelHidden": true,
     
123.                         "disabled": false,
     
124.                         "hidden": false,
     
125.                         "optionItems": [{
     
126.                                 "value": "1",
     
127.                                 "label": "产品经理"
     
128.                         }, {
     
129.                                 "value": "2",
     
130.                                 "label": "研发经理"
     
131.                         }, {
     
132.                                 "value": "3",
     
133.                                 "label": "架构师"
     
134.                         }, {
     
135.                                 "value": "4",
     
136.                                 "label": "前端开发"
     
137.                         }, {
     
138.                                 "value": "5",
     
139.                                 "label": "后端开发"
     
140.                         }, {
     
141.                                 "value": "6",
     
142.                                 "label": "其他"
     
143.                         }],
     
144.                         "required": false,
     
145.                         "validation": "",
     
146.                         "validationHint": "",
     
147.                         "customClass": "",
     
148.                         "labelIconClass": null,
     
149.                         "labelIconPosition": "rear",
     
150.                         "labelTooltip": null,
     
151.                         "onCreated": "",
     
152.                         "onMounted": "",
     
153.                         "onChange": "",
     
154.                         "onValidate": ""
     
155.                 },
     
156.                 "id": "radio113860"
     
157.         }, {
     
158.                 "type": "static-text",
     
159.                 "icon": "static-text",
     
160.                 "formItemFlag": false,
     
161.                 "options": {
     
162.                         "name": "statictext96809",
     
163.                         "columnWidth": "200px",
     
164.                         "hidden": false,
     
165.                         "textContent": "3. 您主要在什么场景中使用OpenAuth.Net？（多选）",
     
166.                         "customClass": "",
     
167.                         "onCreated": "",
     
168.                         "onMounted": "",
     
169.                         "label": "static-text"
     
170.                 },
     
171.                 "id": "statictext96809"
     
172.         }, {
     
173.                 "type": "checkbox",
     
174.                 "icon": "checkbox-field",
     
175.                 "formItemFlag": true,
     
176.                 "options": {
     
177.                         "name": "checkbox102067",
     
178.                         "label": "checkbox",
     
179.                         "labelAlign": "",
     
180.                         "defaultValue": [],
     
181.                         "columnWidth": "200px",
     
182.                         "size": "",
     
183.                         "displayStyle": "inline",
     
184.                         "buttonStyle": false,
     
185.                         "border": false,
     
186.                         "labelWidth": null,
     
187.                         "labelHidden": true,
     
188.                         "disabled": false,
     
189.                         "hidden": false,
     
190.                         "optionItems": [{
     
191.                                 "value": "1",
     
192.                                 "label": "工作流引擎/流程管理"
     
193.                         }, {
     
194.                                 "value": "2",
     
195.                                 "label": "低代码开发平台"
     
196.                         }, {
     
197.                                 "value": "3",
     
198.                                 "label": "动态表单生成"
     
199.                         }, {
     
200.                                 "value": "4",
     
201.                                 "label": "可视化表单设计"
     
202.                         }, {
     
203.                                 "value": "5",
     
204.                                 "label": "数据收集/问卷调查"
     
205.                         }],
     
206.                         "required": false,
     
207.                         "validation": "",
     
208.                         "validationHint": "",
     
209.                         "customClass": "",
     
210.                         "labelIconClass": null,
     
211.                         "labelIconPosition": "rear",
     
212.                         "labelTooltip": null,
     
213.                         "onCreated": "",
     
214.                         "onMounted": "",
     
215.                         "onChange": "",
     
216.                         "onValidate": ""
     
217.                 },
     
218.                 "id": "checkbox102067"
     
219.         }, {
     
220.                 "type": "static-text",
     
221.                 "icon": "static-text",
     
222.                 "formItemFlag": false,
     
223.                 "options": {
     
224.                         "name": "statictext44888",
     
225.                         "columnWidth": "200px",
     
226.                         "hidden": false,
     
227.                         "textContent": "4. 您对OpenAuth.Net现有的功能是否满意？",
     
228.                         "customClass": "",
     
229.                         "onCreated": "",
     
230.                         "onMounted": "",
     
231.                         "label": "static-text"
     
232.                 },
     
233.                 "id": "statictext44888"
     
234.         }, {
     
235.                 "type": "radio",
     
236.                 "icon": "radio-field",
     
237.                 "formItemFlag": true,
     
238.                 "options": {
     
239.                         "name": "radio74071",
     
240.                         "label": "radio",
     
241.                         "labelAlign": "",
     
242.                         "defaultValue": null,
     
243.                         "columnWidth": "200px",
     
244.                         "size": "",
     
245.                         "displayStyle": "inline",
     
246.                         "buttonStyle": false,
     
247.                         "border": false,
     
248.                         "labelWidth": null,
     
249.                         "labelHidden": true,
     
250.                         "disabled": false,
     
251.                         "hidden": false,
     
252.                         "optionItems": [{
     
253.                                 "value": "1",
     
254.                                 "label": "非常满意"
     
255.                         }, {
     
256.                                 "value": "2",
     
257.                                 "label": "一般"
     
258.                         }, {
     
259.                                 "value": "3",
     
260.                                 "label": "不满意"
     
261.                         }],
     
262.                         "required": false,
     
263.                         "validation": "",
     
264.                         "validationHint": "",
     
265.                         "customClass": "",
     
266.                         "labelIconClass": null,
     
267.                         "labelIconPosition": "rear",
     
268.                         "labelTooltip": null,
     
269.                         "onCreated": "",
     
270.                         "onMounted": "",
     
271.                         "onChange": "",
     
272.                         "onValidate": ""
     
273.                 },
     
274.                 "id": "radio74071"
     
275.         }, {
     
276.                 "type": "static-text",
     
277.                 "icon": "static-text",
     
278.                 "formItemFlag": false,
     
279.                 "options": {
     
280.                         "name": "statictext36206",
     
281.                         "columnWidth": "200px",
     
282.                         "hidden": false,
     
283.                         "textContent": "5. 您对OpenAuth.Net的文档指南是否满意？",
     
284.                         "customClass": "",
     
285.                         "onCreated": "",
     
286.                         "onMounted": "",
     
287.                         "label": "static-text"
     
288.                 },
     
289.                 "id": "statictext36206"
     
290.         }, {
     
291.                 "type": "radio",
     
292.                 "icon": "radio-field",
     
293.                 "formItemFlag": true,
     
294.                 "options": {
     
295.                         "name": "radio88180",
     
296.                         "label": "radio",
     
297.                         "labelAlign": "",
     
298.                         "defaultValue": null,
     
299.                         "columnWidth": "200px",
     
300.                         "size": "",
     
301.                         "displayStyle": "inline",
     
302.                         "buttonStyle": false,
     
303.                         "border": false,
     
304.                         "labelWidth": null,
     
305.                         "labelHidden": true,
     
306.                         "disabled": false,
     
307.                         "hidden": false,
     
308.                         "optionItems": [{
     
309.                                 "value": "1",
     
310.                                 "label": "非常满意"
     
311.                         }, {
     
312.                                 "value": "2",
     
313.                                 "label": "一般"
     
314.                         }, {
     
315.                                 "value": "3",
     
316.                                 "label": "不满意"
     
317.                         }],
     
318.                         "required": false,
     
319.                         "validation": "",
     
320.                         "validationHint": "",
     
321.                         "customClass": "",
     
322.                         "labelIconClass": null,
     
323.                         "labelIconPosition": "rear",
     
324.                         "labelTooltip": null,
     
325.                         "onCreated": "",
     
326.                         "onMounted": "",
     
327.                         "onChange": "",
     
328.                         "onValidate": ""
     
329.                 },
     
330.                 "id": "radio88180"
     
331.         }, {
     
332.                 "type": "static-text",
     
333.                 "icon": "static-text",
     
334.                 "formItemFlag": false,
     
335.                 "options": {
     
336.                         "name": "statictext63406",
     
337.                         "columnWidth": "200px",
     
338.                         "hidden": false,
     
339.                         "textContent": "7. 您是否愿意向其他人推荐OpenAuth.Net？",
     
340.                         "customClass": "",
     
341.                         "onCreated": "",
     
342.                         "onMounted": "",
     
343.                         "label": "static-text"
     
344.                 },
     
345.                 "id": "statictext63406"
     
346.         }, {
     
347.                 "type": "radio",
     
348.                 "icon": "radio-field",
     
349.                 "formItemFlag": true,
     
350.                 "options": {
     
351.                         "name": "radio92444",
     
352.                         "label": "radio",
     
353.                         "labelAlign": "",
     
354.                         "defaultValue": null,
     
355.                         "columnWidth": "200px",
     
356.                         "size": "",
     
357.                         "displayStyle": "inline",
     
358.                         "buttonStyle": false,
     
359.                         "border": false,
     
360.                         "labelWidth": null,
     
361.                         "labelHidden": true,
     
362.                         "disabled": false,
     
363.                         "hidden": false,
     
364.                         "optionItems": [{
     
365.                                 "value": "1",
     
366.                                 "label": "非常愿意"
     
367.                         }, {
     
368.                                 "value": "2",
     
369.                                 "label": "有合适的机会愿意推荐"
     
370.                         }, {
     
371.                                 "value": "3",
     
372.                                 "label": "不愿意"
     
373.                         }],
     
374.                         "required": false,
     
375.                         "validation": "",
     
376.                         "validationHint": "",
     
377.                         "customClass": "",
     
378.                         "labelIconClass": null,
     
379.                         "labelIconPosition": "rear",
     
380.                         "labelTooltip": null,
     
381.                         "onCreated": "",
     
382.                         "onMounted": "",
     
383.                         "onChange": "",
     
384.                         "onValidate": ""
     
385.                 },
     
386.                 "id": "radio92444"
     
387.         }, {
     
388.                 "type": "static-text",
     
389.                 "icon": "static-text",
     
390.                 "formItemFlag": false,
     
391.                 "options": {
     
392.                         "name": "statictext85090",
     
393.                         "columnWidth": "200px",
     
394.                         "hidden": false,
     
395.                         "textContent": "8. 您认为OpenAuth.Net应该尽快完善哪些功能？",
     
396.                         "customClass": "",
     
397.                         "onCreated": "",
     
398.                         "onMounted": "",
     
399.                         "label": "static-text"
     
400.                 },
     
401.                 "id": "statictext85090"
     
402.         }, {
     
403.                 "type": "input",
     
404.                 "icon": "text-field",
     
405.                 "formItemFlag": true,
     
406.                 "options": {
     
407.                         "name": "input81576",
     
408.                         "label": "input",
     
409.                         "labelAlign": "",
     
410.                         "type": "text",
     
411.                         "defaultValue": "",
     
412.                         "placeholder": "请留下您的宝贵建议",
     
413.                         "columnWidth": "200px",
     
414.                         "size": "",
     
415.                         "labelWidth": null,
     
416.                         "labelHidden": true,
     
417.                         "readonly": false,
     
418.                         "disabled": false,
     
419.                         "hidden": false,
     
420.                         "clearable": true,
     
421.                         "showPassword": false,
     
422.                         "required": false,
     
423.                         "validation": "",
     
424.                         "validationHint": "",
     
425.                         "customClass": "",
     
426.                         "labelIconClass": null,
     
427.                         "labelIconPosition": "rear",
     
428.                         "labelTooltip": null,
     
429.                         "minLength": null,
     
430.                         "maxLength": null,
     
431.                         "showWordLimit": false,
     
432.                         "prefixIcon": "",
     
433.                         "suffixIcon": "",
     
434.                         "appendButton": false,
     
435.                         "appendButtonDisabled": false,
     
436.                         "buttonIcon": "el-icon-search",
     
437.                         "onCreated": "",
     
438.                         "onMounted": "",
     
439.                         "onInput": "",
     
440.                         "onChange": "",
     
441.                         "onFocus": "",
     
442.                         "onBlur": "",
     
443.                         "onValidate": ""
     
444.                 },
     
445.                 "id": "input81576"
     
446.         }],
     
447.         "formConfig": {
     
448.                 "modelName": "formData",
     
449.                 "refName": "vForm",
     
450.                 "rulesName": "rules",
     
451.                 "labelWidth": 150,
     
452.                 "labelPosition": "left",
     
453.                 "size": "",
     
454.                 "labelAlign": "label-right-align",
     
455.                 "cssCode": "",
     
456.                 "customClass": [],
     
457.                 "functions": "",
     
458.                 "layoutType": "PC",
     
459.                 "dataSources": [],
     
460.                 "onFormCreated": "",
     
461.                 "onFormMounted": "",
     
462.                 "onFormDataChange": "",
     
463.                 "onFormValidate": ""
     
464.         }
     
465. }

复制代码

admin

是的，Pro版本和Mobile版本的json文件不能通用。