我正在尝试正确渲染从我的商店获取数据的Kendo网格。
我使用的资源是:
Vuex How to bind store to KendoUi-Vue Grid in transport read
https://www.telerik.com/blogs/get-more-out-of-vue-kendo-ui-using-vuex
这是我尝试过的:
<template>
<div>
<kendo-grid :data-source="kendoDataSource" ref="gridComponent">
<kendo-grid-column field="id" title="ID" :width="200" :hidden="true"></kendo-grid-column>
<kendo-grid-column field="name" title="Name" :width="200"></kendo-grid-column>
<kendo-grid-column field="type" title="Type"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
computed: {
...mapGetters({
items: 'widgets/getWidgets'
}),
kendoDataSource() {
let items = this.items;
return new kendo.data.DataSource({
data: items
})
}
}
}
</script>
与此有关的是我的错误: 未定义'kendo'(no-undef)
所以是一个四行网格,与我在商店中的商品数量相同。 而且,当我尝试在计算部分返回此值时:
return {
schema: {
data: function (response) {
return response;
},
model: {
id: "id",
fields: {
id: { type: "number" },
name: { type: "string" },
type: { type: "string" },
data: { type: "string" }
}
}
},
transport: {
read: function (options) {
options.success(items);
}
}
}
我也有4个空行,数据函数中的响应正是正确的信息,由4个项目组成的数组:
[{
"id": 1,
"name": "Richard Parker",
"type": "Tiger",
"data": "{}"
},
{
"id": 2,
"name": "Shere Khan",
"type": "Tiger",
"data": "{}"
},
{
"id": 3,
"name": "Simba",
"type": "Lion",
"data": "{}"
},{
"id": 4,
"name": "Garfield",
"type": "Cat",
"data": "{}"
}]
我还尝试从kendoDataSource()返回项目,也得到了4个空行。...