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>