在vue中使用FormBuilder,setData is not undefined

今天在vue使用formbuilder,点击页面想自动加载setData让表单自动加载,官方的例子是这样子的

var fbEditor = document.getElementById('build-wrap');
var formBuilder = $(fbEditor).formBuilder();
var formData = '[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]';

document.getElementById('setData').addEventListener('click', function() {
    formBuilder.actions.setData(formData);
});

但是这样写必须要写一个button id为setData,点击它之后才能加载,我想要打开页面自动加载于是我这样写

var fbEditor = document.getElementById('build-wrap');
var formBuilder = $(fbEditor).formBuilder();
var formData = '[{"type":"text","label":"Full Name","subtype":"text","className":"form-control","name":"text-1476748004559"},{"type":"select","label":"Occupation","className":"form-control","name":"select-1476748006618","values":[{"label":"Street Sweeper","value":"option-1","selected":true},{"label":"Moth Man","value":"option-2"},{"label":"Chemist","value":"option-3"}]},{"type":"textarea","label":"Short Bio","rows":"5","className":"form-control","name":"textarea-1476748007461"}]';

 formBuilder.actions.setData(formData);

但是这样就一直提示  formBuilder.actions.setData() is not undefined ,百度发现这个插件很少有人用,完全搜不到结果,无奈只能去读官方英文文档,然后我在文档的getData中看到了希望嘿嘿

Get formBuilder data in json, js, or xml structure. Defaults to js. Like all actions, getData is only available after formBuilder has fully initialized.

Won't Work

var formBuilder = $(fbEditor).formBuilder();
console.log(formBuilder.actions.getData());

The above pattern should be avoided for 2 reasons:

1. At initialization formBuilder will only have the data you provided it.
2. formBuilder loads asynchronous and actions are not immediately available.

If an action needs to be called immediately upon initialization it's recommended to use the promise property.

• @param {String} type
• @param {Boolean} formatted
• @return {Array|String} formData

 大概意思就是不能直接formBuilder.actions.getData()这样使用,因为formBuilder未加载,会导致undefined,要想使用的话用promise,我就点进去看发现了解决方法

Promise

Use formBuilder the moment the instance is available.

Async/Await Usage - (requires transpilation)

async loadFormBuilder() => {
    var formBuilder = await $(fbEditor).formBuilder().promise;
    console.log(formBuilder.formData);
}

Promise.then() Usage

$(fbEditor).formBuilder().promise.then(formBuilder => {
    console.log(formBuilder.formData);

 使用Promise.then()就可以不用把setData写在点击事件里面了,然后依葫芦画瓢在vue中,我写在watch中

watch:{
		editData:{
			handler() {
				var options = {
					i18n: {
        		locale: 'zh-CN'//汉化
        	},
    			howActionButtons: false //隐藏右下角的按钮
    		}
    		var fbEditor = document.getElementById('build-wrap');
    		var formBuilder = $(fbEditor).formBuilder(options);
    		formBuilder.promise.then(formBuilder => {
    			formBuilder.actions.setData(this.editData.dataJson);
                //this.editData.dataJson, 后台获取的json数据
    		});
    	}
    }
}

 

 ok!大功告成!这样就可以在打开页面自动执行setData填充数据