无法在vue项目中导入vue_jqxgrid文件

时间:2018-10-30 10:53:29

标签: javascript vue.js jqwidget

根据我们需要导入vue_jqxgrid.vue文件的文档,我正在尝试使用jqxwidgets在我的项目中建立一个网格,当我导入文件时出现这样的错误

Uncaught SyntaxError: Unexpected token < on the vue_jqxgrid.vue like 8
<script type="text/javascript" src="js/jqx/vue/vue_jqxgrid.vue"> </script>

我已经以这种方式导入了index.html

var custom_erp_widget = new Vue({
    el : '#custom-erp-widgets',
    data : {
        showContainerHeader : false,
        moduleData : {

        }
    },
    components : {

        'custom-erp-body' : {
            template : '<div class="row" id="custom-erp-widget-body">'+

                            '<div v-for="form in formData" class="col-12" v-if="form.column_name == `seperator`">'+
                               'test' + 
                            '</div>'+

                            '<div class="col-6" v-else-if="form.column_name == `grid_start`">'+
                                '<JqxGrid  :source="dataAdapter" :columns="columns"'+
                                            ':pageable="true" :autoheight="true" :sortable="true"'+
                                            ':altrows="true" :enabletooltip="true" :editable="true"'+
                                            ':selectionmode="`multiplecellsadvanced`" :columngroups="columngroups">'+
                                '</JqxGrid>'+   
                            '</div>'+

                            '<div  class="col-6 form-group" v-else>'+

                                'test' +

                            '</div>'+



                       '</div>',
            props : {
                moduleData : Object
            },
            data : function(){
                return {
                    formData : [],
                    gridData : [],
                    getWidth: getWidth('grid'),
                    dataAdapter: new jqx.dataAdapter(this.source),
                    columns: [
                        { text: 'Name', datafield: 'name', width: 250 },
                        { text: 'Beverage Type', datafield: 'type', width: 250 },
                        { text: 'Calories', datafield: 'calories', width: 180 },
                        { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                        { text: 'Protein', datafield: 'protein', minwidth: 120 }
                    ]
                }
            },
                // ['currentModuleFormId','currentModuleReportId'],
            // for emitting events so that techild components
            // like (header/body) can catch and act accordingly
            mounted () {
                var _this = this;
                eventHub.$on('getFormData', function(e) {

                    if(e == 'report'){
                        _this.getReportData();
                    }
                    else if(e == 'form'){
                        _this.getFormData();
                    }

                });

              },

            methods : {

                getFormData : function(__this){
                    var _this = this;

                    axios
                        .get('http://localhost:3000/getFormData' , {
                            params: {
                              formID: _this.$props.moduleData.currentModuleFormID
                            }
                        })
                        .then(function(response){
                            //response data gets 2 array
                            // 1st array has all the fields required for the form
                            // 2nd array contains only the grid data required for the form
                            _this.formData = response.data[0];
                            _this.gridData = response.data[1];
                            console.log(response);

                        })
                },
                getReportData : function(){
                    //
                }

            }

        }
    },

})

我是Vue.js的新手,如果您需要更多详细信息,请告诉我。

0 个答案:

没有答案