我正在创建一种可以通过v-bind:is指令绑定到VueJS组件上的元素的表单。
我已经能够创建一个非常基本的表单,但是在导入组件定义中的第三方插件(即axios)时遇到了麻烦,无法帮助我实现此页面上想要的功能。
{
name: 'Request Form',
props: ['variables'],
data () {
return {
name:"",
userName: "",
description:"",
application: "",
role: "",
isOpen:"",
options: [],
results:[]
};
},
computed: {
taskId () {
if (this.taskDefinition && this.taskDefinition._id) {
return this.taskDefinition._id;
} else {
return 'startEvent';
}
}
},
methods: {
setFormData() {
this.formData = this.variables.formProperties.reduce((acc, formProperty) => {
if (this.variables && this.variables[formProperty._id]) {
return Object.assign(acc, { [formProperty._id]: this.variables[formProperty._id] });
} else {
return Object.assign(acc, { [formProperty._id]: formProperty.type.name === 'boolean' ? false : '' });
}
}, {});
},
cancel () {
this.resetForm();
this.$emit('cancel');
},
resetForm () {
this.setFormData();
},
submit () {
var payload = this.formData;
payload.name = this.name;
payload.userName = this.userName;
payload.role = this.role;
payload.application = this.application;
this.$emit('submit', payload);
}
},
created () {
this.setFormData();
},
template: `
<form class="container">
<div class="form-group row">
<label class="col-md-3 control-label" for="userName">User Name or Employee ID</label>
<div class="col-md-9">
<input class="form-control" type="text" id="userName" name="userName" v-model="userName" />
</div>
</div>
<div class="form-group row">
<label class="col-md-3 control-label" for="application">Application</label>
<div class="col-md-9">
<select class="form-control" type="text" id="application" name="application" v-model="application">
<option>App1</option>
<option>App2</option>
</select>
</div>
</div>
</form>
`
}```