我正在尝试在使用VUE包装器创建的数据源上调用fetch方法。
错误是 [vue warn]:已安装挂钩中的错误:" TypeError:this。$ refs.datasource.fetch不是函数" ,所以我的问题是我如何从该方法调用方法$ refs对象。
我在这里做了一个stackblitz
<body>
<div id="vueapp" class="vue-app">
<kendo-datasource ref="datasource" :data="dataSourceArray">
</kendo-datasource>
</div>
</body>
new Vue({
el: '#vueapp',
data: function() {
return {
dataSourceArray: [
{ text: 'Albania', value: '1' },
{ text: 'Andorra', value: '2' },
{ text: 'Armenia', value: '3' },
{ text: 'Austria', value: '4' },
{ text: 'Azerbaijan', value: '5' },
{ text: 'Belarus', value: '6' },
{ text: 'Belgium', value: '7' }
]
}
},
mounted: function () {
this.$refs.datasource.fetch()//<== error here
}
})
您要获得的参考是整个<kendo-datasource>
组件,它没有直接具有fetch()
方法。我相信您要做的就是将kendodatasource在组件中获取并在其上调用获取方法,这将是:
this.$refs.remoteDatasource.kendoDataSource.fetch();
修改您的示例以在行动中看到它:
<kendo-datasource
ref="datasource"
:data="dataSourceArray"
:type="'odata'"
:transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'">
</kendo-datasource>
this.$refs.remoteDatasource.kendoDataSource.fetch(function(){
var data = this.data();
console.log(data[0]);
});
}