Importing Webix from "@xbs/webix-pro"

edited October 2018 in Technical questions

Attempting to get webix instantiated in our Vue.js app and I am constantly getting

Error in mounted hook: "ReferenceError: webix is not defined"

Here is the import in main.js

import webix from '@xbs/webix-pro'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  webix,
  render: h => h(App)
})

and then the webix vue component:

<template>
    <div></div>
</template>
<script>

function  data_handler(value){
    var view = webix.$$(this.webixId); 


    if (typeof value === "object"){
      if (view.setValues)
        view.setValues(value);
      else if (view.parse){
        view.clearAll();
        view.parse(value)
      }
    } else if (view.setValue)
      view.setValue(value);

    webix.ui.each(view, function(sub){
      if (sub.hasEvent && sub.hasEvent("onValue"))
        sub.callEvent("onValue", [value]);
    }, this, true);
  }
export default {
    name: 'webix-ui',
    template:'<div></div>',
    props: ['config', 'value'],
    watch:{
      value:{
        handler:data_handler
      }
      },   

     mounted:function(){
      var config = webix.copy(this.config);
      config.$scope = this;

      this.webixId = webix.ui(config, this.$el);
      if (this.value)
        data_handler.call(this, this.value);
    },
    destroyed:function(){
      webix.$$(this.webixId).destructor();
    }
}
</script>

Then my instantiation of that component:

<template>
    <div>
        <h1>Hello There! </h1>
    <webix-ui :config='ui' :value='results'></webix-ui>

    </div>
</template>

<script>

import WebixUi from '../plugins/webix/webix-ui.vue'
import axios from 'axios'



export default {
    name: 'WebixDt',
    components: {
        WebixUi
    },

    data(){
        return{
        results: [],
        ui: {
            view:"datatable", 
            autoheight:true, 
            autowidth:true,
            resizeColumn: true,
            select:"row",

            scrollY: true,

                columns:[
                    { id:"firstName", header:"Id" },
                    { id:"lastName", header:"Index" },
                    { id:"locationId", header:"Guid" },
                    { id: "eulaAccept", header:"Active"},
                    { id: "balance", header:"Balance"},
                    { id: "picture", header:"Picture"},
                    { id: "age", header:"Age"},
                    { id: "eyeColor", header:"Eye Color"},
                    { id: "firstName", header:"First Name"},
                    { id: "lastName", header:"Last Name"},
                    { id: "company", header:"Company"},
                    { id: "email", header:"Email"},
                    { id: "phone", header:"Phone"},
                    { id: "address", header:"Address"},
                    { id: "registered", header:"Registered"},
                    { id: "latitude", header:"Latitude"},
                    { id: "longitude", header:"Longitude"}

                ]

        }
    }
    },
    methods:{
        updateRecords(){
            var uri = "https://localhost:5001/api/user"
            axios.get(uri)
            .then(response => {this.results = response.data})

        }
    },
    created: function(){
        this.updateRecords();
    }

}

</script>
<style>

</style>
Tagged:

Comments

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!