Vuex 如何在传输读取中将商店绑定到 KendoUi-Vue Grid [英] Vuex How to bind store to KendoUi-Vue Grid in transport read

问题描述

我正在尝试将 Kendo UI 上的数据与来自 Vuex getter 的数据绑定.

我尝试了以下但没有运气.请帮助我是否在 vuex 或 kendo 上遗漏了什么.

剑道扩展:

</kendo-grid>

组件:

 计算:{顾客() {返回 this.$store.getters.customers;}},数据() {返回 {剑道数据源:{架构:{数据:功能(响应){返回响应；},模型: {id: "客户 ID",字段:{公司名称:{ 类型:字符串"}，}}},运输: {阅读:功能(选项){options.success(this.customers);}}}};

我收到错误消息.TypeError: 无法读取未定义的属性长度"

当我尝试在 kendo 的传输中调试 this.customers 时，对象 this.customers 始终为空.

数据格式如下:

<预><代码>[{"客户ID": "ALFKI",公司名称":Alfreds Futterkiste"},{"客户ID": "ANATR",公司名称":Ana Trujillo Emparedados y helados"}]

Store.js

出口默认{状态: {客户:JSON.parse(JSON.stringify(customers))},吸气剂:{客户(状态){返回 state.customers;}}};

当我尝试直接在 options.success(this.customers);

上绑定数据时

就像下面显示的方式一样，网格成功填充了数据.但是当我尝试使用 getters 进行绑定时，出现了错误.

TypeError: 无法读取未定义的属性长度"

 options.success([{"客户ID": "ALFKI","CompanyName": "Alfreds Futterkiste",},{"客户ID": "ANATR","CompanyName": "Ana Trujillo Emparedados y helados",}]);

解决方案

我认为您想使用计算属性而不是数据.

计算:{顾客() {返回 this.$store.getters.customers;},剑道数据源(){const 客户 = this.customers返回 {架构:{数据:功能(响应){返回响应；},模型: {id: "客户 ID",字段:{公司名称:{ 类型:字符串"}，}}},运输: {阅读:功能(选项){options.success(客户)；}}}}}}

I am trying to bind the data on Kendo UI with the data from Vuex getters.

I have tried the following but no luck. Please help whether where i am missing something on the vuex or on the kendo.

Kendo Extensions:

<kendo-grid :data-source="kendoDataSource">
</kendo-grid>

Components:

  computed: {
    customers() {
      return this.$store.getters.customers;
    }
  },
  data() {
    return {
      kendoDataSource: {
        schema: {
          data: function(response) {
            return response;
          },
          model: {
            id: "CustomerID",
            fields: {
              CompanyName: { type: "string" },
            }
          }
        },
        transport: {
          read: function(options) {
            options.success(this.customers);
          }
        }
      }    
     };

I am getting the error. TypeError: Cannot read property 'length' of undefined

When i tried to debug the this.customers in the transport of kendo the object this.customers is always null.

The data are in the format as shown in below:

[
    {
      "CustomerID": "ALFKI",
      "CompanyName": "Alfreds Futterkiste"
    },
    {
      "CustomerID": "ANATR",
      "CompanyName": "Ana Trujillo Emparedados y helados"
    }
]

Store.js

export default {
  state: {
    customers: JSON.parse(JSON.stringify(customers))
  },
  getters: {
    customers(state) {
      return state.customers;
    }
  }
};

When i try to bind the data directly on options.success(this.customers);

Like the way shown below the grid get populated with the data successfully. But while i tried to bind using the getters there is the error.

TypeError: Cannot read property 'length' of undefined

  options.success([
        {
          "CustomerID": "ALFKI",
          "CompanyName": "Alfreds Futterkiste",
        },
        {
          "CustomerID": "ANATR",
          "CompanyName": "Ana Trujillo Emparedados y helados",
        }
    ]);

解决方案

I think you want to use computed properties instead of data.

computed: {
    customers() {
      return this.$store.getters.customers;
    },
    kendoDataSource() {
      const customers = this.customers
      return {
        schema: {
          data: function(response) {
            return response;
          },
          model: {
            id: "CustomerID",
            fields: {
              CompanyName: { type: "string" },
            }
          }
        },
        transport: {
          read: function(options) {
            options.success(customers);
          }
        }
      }
    }
  }
}

这篇关于Vuex 如何在传输读取中将商店绑定到 KendoUi-Vue Grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！