.vue file to js file didn`t work

[gy.leeParticipant]

hello! I want .vue to js file
this is my config, my app didn`t load anything.
jsp file

 <div id = 'app'>
          <gridTest :width="getWidth" 
                  :source="dataAdapter" 
                  :columns="columns" 
                  :columnsautoresize="true" 
                  :columnsresize="true" 
                  :autoheight="true" 
                  :autorowheight="true" 
                  :class="setlog"
                  >
          </gridTest>
      </div>
      <script src="/resources/js/ticontroller/testJqxGridvue.js">
        new Vue ({
            el: '#app',
            data: function () {
                return {
                    getWidth: '100%',
                    dataAdapter: new jqx.dataAdapter(this.source),
                    columns: [
                        { text: 'name', datafield: 'name' },
                        { text: 'age', datafield: 'age' },
                        { text: 'grade', datafield: 'grade' },
                        { text: 'phoneNumber', datafield: 'phoneNumber' }
                    ]
                }
            },
            beforeCreate: function () {
                this.source = {
                    datatype: 'json',
                    datafields: [
                        { name: 'name' },
                        { name: 'age' },
                        { name: 'grade' },
                        { name: 'phoneNumber' }
                    ],
                    root: 'data',
                    url: '/test/testforjqxgrid.json'
                };
            },
            computed: {
              setlog: function () {
                console.log("loglog");
              }
            }
        });
      </script>

main.js –> webpack build

import Vue from 'vue'
import JqxGrid from "./jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
Vue.config.productionTip = false

Vue.component('gridTest', JqxGrid);

[adminKeymaster]

Hi gy.lee,

In order to use our DataGrid component with Vue, please refer to https://www.jqwidgets.com/vue/vue-grid/#https://www.jqwidgets.com/vue/vue-grid/vue-grid-defaultfunctionality.htm

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[gy.leeParticipant]

Hi! i want use grid component directly in jsp file.
but .vue file can’t import.
so i was build library. and import with script tag but it didn’t work.

[gy.leeParticipant]

i solved.!
this is my vue_jqxgrid.js

import ‘../jqwidgets/jqxcore.js’;
import ‘../jqwidgets/jqxdata.js’;
import ‘../jqwidgets/jqxdata.export.js’;
import ‘../jqwidgets/jqxbuttons.js’;
import ‘../jqwidgets/jqxbuttongroup.js’;
import ‘../jqwidgets/jqxscrollbar.js’
import ‘../jqwidgets/jqxmenu.js’
import ‘../jqwidgets/jqxlistbox.js’
import ‘../jqwidgets/jqxdropdownlist.js’
import ‘../jqwidgets/jqxcombobox.js’
import ‘../jqwidgets/jqxnumberinput.js’
import ‘../jqwidgets/jqxcheckbox.js’
import ‘../jqwidgets/globalization/globalize.js’
import ‘../jqwidgets/jqxcalendar.js’
import ‘../jqwidgets/jqxnumberinput.js’
import ‘../jqwidgets/jqxdatetimeinput.js’
import ‘../jqwidgets/jqxgrid.js’
import ‘../jqwidgets/jqxgrid.edit.js’
import ‘../jqwidgets/jqxgrid.pager.js’
import ‘../jqwidgets/jqxgrid.selection.js’
import ‘../jqwidgets/jqxgrid.filter.js’
import ‘../jqwidgets/jqxgrid.sort.js’
import ‘../jqwidgets/jqxgrid.storage.js’
import ‘../jqwidgets/jqxgrid.grouping.js’
import ‘../jqwidgets/jqxgrid.export.js’
import ‘../jqwidgets/jqxgrid.columnsresize.js’
import ‘../jqwidgets/jqxgrid.columnsreorder.js’
import ‘../jqwidgets/jqxgrid.aggregates.js’
import ‘../jqwidgets/jqxgrid.chart.js’

export default {
template: `

<div v-bind:id=”id”>
<slot></slot>
</div>`,
props: {
altrows: Boolean,
altstart: Number,
altstep: Number,
autoshowloadelement: Boolean,
autoshowfiltericon: Boolean,
autoshowcolumnsmenubutton: Boolean,
showcolumnlines: Boolean,
showrowlines: Boolean,
showcolumnheaderlines: Boolean,
adaptive: Boolean,
adaptivewidth: Number,
clipboard: Boolean,
closeablegroups: Boolean,
columnsmenuwidth: Number,
columnmenuopening: Function,
columnmenuclosing: Function,
cellhover: Function,

…

[Author]

Posts