根据我们需要导入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
的新手,如果您需要更多详细信息,请告诉我。