无法将第三方VueJS组件用于绑定到v-bind:is属性的组件

时间:2019-06-28 13:54:54

标签: javascript vue.js vuejs2 vue-component

我正在创建一种可以通过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>
    `
}```

0 个答案:

没有答案