켄도 그리드(Vuex Store 포함), VueJs

켄도 그리드(Vuex Store 포함), VueJs

저는 상점에서 데이터를 가져오는 검도 그리드를 올바르게 렌더링하려고 합니다.

사용한 리소스는 다음과 같습니다.

Vuex 전송 판독 시 저장소를 KendoUi-Vue 그리드에 바인딩하는 방법

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-definition).

하지만 나는 이것을 만들었다:

그래서 네 줄로 된 격자, 내 가게에 있는 내 물건의 수와 같아.또한 계산 섹션에서 반환을 시도해보니 다음과 같습니다.

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": "{}"
  }]

kendo Data Source()에서 아이템을 반품하려고 했는데 4개의 emtpy 행이 있었습니다.

언급URL : https://stackoverflow.com/questions/52474974/kendo-grid-with-vuex-store-vuejs